Three.js 使用 THREE.TextureLoader() 加载图像时出现 CORS 错误

Question

当我尝试从服务器加载图像时出现 cors。通常我可以使用 img 标签 load/display 图像，但是当我尝试使用 THREE.TextureLoader() 加载它时；它 returns cors 错误。

我试着像下面这样处理它。

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);

许多回答说 crossOrigin = "" 解决了问题，但事实并非如此。 cors 使用 textureloader 处理是否有任何解决方法？

Answer 1

loader.setCrossOrigin("anonymous");

由于 anonymous 是 crossOrigin 的默认值，因此无需明确设置。

当 TextureLoader 上下文中出现 CORS 问题时，您必须通过确保正确定义 CORS headers 来解决 server-side 上的问题。这种headers的配置取决于您使用的网络服务器。

Answer 2

Django 和 three.js 让我有点困惑。因为通常我可以毫无问题地显示图像，除了 three.js。我的意思是没有 CORS 错误，因为我正在使用 corsheaders 模块处理它。但看起来 three.js 并不关心那部分。所以我在媒体目录的 domain.conf 文件中直接进行了 Allow-Origin 处理。

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

最后这样解决了问题。

Three.js 使用 THREE.TextureLoader() 加载图像时出现 CORS 错误

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

three.js