Three.js TextureLoader Cannot Load Panorama Image in iOS Due to Security Restrictions

Question

I have a very simple panorama image built in three.js that successfully works in my iOS app when loaded via URL

  let request = URLRequest(url: URL.init(string: "https://example.com/tour")!)
  self.webView.load(request)

when I store the same files locally in iOS app, they are loaded fine except for a panoramic image which is likely blocked by CORS in my WKWebView, which is operating like Safari browser as far as I know.

   self.webView.load(URLRequest(url: Bundle.main.url(forResource: "index", withExtension:"html", subdirectory: "web/panorama")! as URL) as URLRequest)

I tried crossOrigin = "use-credentials" or "anonymous" or "" but that does not remove blocking the image.

  var loader = new THREE.TextureLoader();
  loader.crossOrigin = "use-credentials"; // CORS ENABLED
  var material = new THREE.MeshBasicMaterial({
      map:
       loader.load(
             'panorama.jpg', // WORKS VIA HTTP CALL, FAILS VIA LOCAL LOAD                      
  )});

I also tried to pass image as data into the loader.load("image/png;base64, iVstu...") but image is blank.

Any advise how I can load the panoramic image on iOS app with files stored locally?

question from:https://stackoverflow.com/questions/65942257/three-js-textureloader-cannot-load-panorama-image-in-ios-due-to-security-restric

Answer 1

Waitting for answers