THREE.js中的跨域圖片

Question

我在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上的跨域圖像。

Answer 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視圖）中不能很好地工作。

Answer 2

這對我有用

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