THREE.js中的跨域图像

时间:2016-06-15 09:50:10

标签: javascript canvas three.js

我在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:无法执行' texImage2D' on' WebGLRenderingContext':网址上的跨源图片可能无法加载。

2 个答案:

答案 0 :(得分: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视图)中无法正常工作。

答案 1 :(得分:0)

这对我有用

localhost/word/43