THREE.js 中的跨域图像答案

【问题标题】：Cross domain image in THREE.jsTHREE.js 中的跨域图像
【发布时间】：2017-09-18 19:51:15
【问题描述】：

我在 app.domain.com 上有一个应用程序，我想从 image1.domain.com、image2.domain.com 等加载一些图像作为纹理。

我正在使用此代码：

var texture = new THREE.Texture();
var image = new Image();
image.crossOrigin = 'anonymous';
image.onload = function() {
    texture.image = image;
    texture.needsUpdate = true;
    texture.minFilter = THREE.LinearFilter;
};
image.src = url;

在我的图像响应标题上，我有Access-Control-Allow-Origin:app.domain.com，但我仍然收到此错误

three.js?201606101337:30942 DOMException：无法在“WebGLRenderingContext”上执行“texImage2D”：可能无法加载 url 处的跨域图像。

【问题讨论】：

我猜你的意思是“图像响应标题”。
是的，在响应头上
在你的问题中为你改变了。

标签： javascript canvas three.js

【解决方案1】：

为什么不使用Texture Loader？它可能会处理一些边缘情况：

var loader=new THREE.TextureLoader();
loader.setCrossOrigin("anonymous");
loader.load(
  url,
  function do_something_with_texture(tex) { }
);

如果这不起作用，请尝试将标题更改为Access-Control-Allow-Origin: *。

另外，请注意 CORS 在 Safari（OSX、iOS 浏览器和 web 视图）中无法正常工作。

【讨论】：

请把图片的网址贴出来，我会检查标题是否正确。
好的，问题是我需要一些 cookie，所以设置 image.crossOrigin = 'use-credentials';成功了

【解决方案2】：

这对我有用

var loader = new THREE.TextureLoader();
loader.setCrossOrigin("");
var map = textureLoader.load("image.png");

【讨论】：