Three.js CORS errors when loading image with THREE.TextureLoader()

Question

I am getting cors when I try to load image from server. Normally I can load/display the image with using img tag but when I try to load it with THREE.TextureLoader(); it returns cors error.

I tried to handle it like below.

const loader = new THREE.TextureLoader();

loader.setCrossOrigin("anonymous");

let texture = loader.load(src,
  function ( texture ) {},

  function ( progress ) {},
  // error drops as cors
  function ( error ) {console.log(error)});

let material = new THREE.MeshBasicMaterial({map: texture});
let mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Many answer says crossOrigin = "" fixes the issue but it doesn't. Is there any workaround for cors handling with textureloader?

Answer 1

loader.setCrossOrigin("anonymous");

Since anonymous is the default value for crossOrigin, there is no need to set it explicitly.

When a CORS issue pops up in context of TextureLoader, you have to fix the issue on the server-side by ensuring CORS headers are properly defined. The configuration of such headers depends on your used web server.

Answer 2

Django and three.js confused me little bit. Because normally I can display image without a problem apart from three.js. I mean no CORS error because I am handling that with corsheaders module. But it's look like three.js doesn't care about that part. So I did a direct Allow-Origin handling inside domain.conffile for media directory.

<Directory "/var/www/domain/media">
    Header set Access-Control-Allow-Origin "*"
    Options FollowSymLinks
    Order allow,deny
    Allow from all
    Require all granted
</Directory>

In the end this solved the problem.

Answer 3

hello if still you have this problem: in some cases you should use you'r image path like below:

image_path+'?not-from-cache-please'

for more information check this link: https://www.hacksoft.io/blog/handle-images-cors-error-in-chrome

Answer 4

var textureLoader = new THREE.TextureLoader();
textureLoader.crossOrigin = null