Geek Answers Handbook

THREE JS Spoiled Canvas and CORS

I am trying to make a scene THREE.jshaving a background image obtained from another domain.

I got tainted canvas errorit because the image did not have CORS approval, and as a result, manipulating the canvas leads to a security error.

After reading this answer , I set THREE.TextureLoader()to enable cross-start loading:

var loader = new THREE.TextureLoader();
//allow cross origin loading
loader.crossOrigin = '';
var texture = loader.load(
   url_to_image,
   // Function when resource is loaded
   function ( texture ) {
     var backgroundMesh = new THREE.Mesh(
       new THREE.PlaneGeometry(2, 2, 0),
       new THREE.MeshBasicMaterial({
            map: texture
        })
      );
     backgroundMesh.material.depthTest = false;
     backgroundMesh.material.depthWrite = false;

     // create your background scene
     backgroundScene = new THREE.Scene();
     backgroundCamera = new THREE.Camera();
     backgroundScene.add( backgroundCamera );
     backgroundScene.add( backgroundMesh );

   },
   // Function called when download progresses
   function ( xhr ) {},
   // Function called when download errors
   function ( xhr ) {}
);

However, now I get the CORS error: Access to Image at 'url_to_image' from origin 'my_domain' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'my_domain' is therefore not allowed access.

The comments of this answer seem to suggest that some domains do not give permission to use the image in a browser in WebGL, how can I find out if this is the case?

If this is not a problem with the domain from which I am extracting the image, how can I make it work?

0
2

, , , , .

, "Access-Control-Allow-Origin".

, ( - CORS), CORS , JS , CORS , .

0

.

:

=== > === >

, , - , , ( - , - ). , , , CORS.

. CORS, . , Safari Disable Cross-Origin Restrictions Develop .

0

More articles:


All Articles