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

Question

当我尝试从服务器加载图像时，我得到cors。通常情况下，我可以加载/显示使用img标签的图像，但当我试图加载它与THREE.TextureLoader();返回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的默认值，因此不需要显式设置。

当CORS问题在TextureLoader上下文中弹出时，您必须通过确保正确定义CORS头来解决服务器端问题。这些标头的配置取决于你使用的web服务器。

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>

最后这个问题解决了。

Answer 3

你好，如果你仍然有这个问题:在某些情况下，您应该像下面这样使用您的图像路径:

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

有关更多信息，请查看此链接:https://www.hacksoft.io/blog/handle-images-cors-error-in-chrome