javascript - Three.js - 为背景场景设置纹理失败

Question

我正在尝试在 three.js 中创建一个同时运行两个场景的动画。第一个有一个固定的纹理，作为页面的背景，而第二个有一个旋转的立方体。这是我遇到问题的代码部分:

THREE.ImageUtils.crossOrigin = '';
var texture = THREE.ImageUtils.loadTexture('https://i.imgur.com/eoWNz.jpg');
var backgroundMesh = new THREE.Mesh( 
    new THREE.PlaneGeometry(2, 2, 0),
    new THREE.MeshBasicMaterial({
         map: texture
    }));

我试着关注 this example和 this question通过使用简单的http服务器和python来解决跨源图像的安全问题，但背景仍然是黑色。

您是否知道我做错了什么？这是fiddle带有完整的代码。

预先感谢您的回复!

编辑:

本地我收到此错误:THREE.Material: 'map' parameter is undefined. in three.min.js:428

Answer 1

我遇到了几个问题。最重要的是，您将此网址用于图片:

https://imgur.com/gallery/eoWNz

但该链接指向 a web page .
实际图像是located on this url :

https://i.imgur.com/eoWNz.jpg

要允许跨源，您必须将加载器上的 crossOrigin 属性设置为 true:

var loader = new THREE.TextureLoader();
loader.crossOrigin = true;

你有两个场景我不知道为什么，我删除了一个。

这里 a working fiddle 最终结果。