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

我试图在

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
    }));

我试图通过使用

python

的

simple http服务器解决跨源图像的安全问题，但背景仍然是黑色的

你知道我做错了什么吗？这是一个完整的代码

提前感谢您的回复

编辑：

在本地我得到了这个错误：
THREE.Material:'map'参数未定义。
在
THREE.min.js:428
中，我遇到了几个问题。最重要的是，您将此url用于图像：

https://imgur.com/gallery/eoWNz

但这一联系指向

实际图像为：

要允许交叉原点，必须将加载程序上的
crossOrigin
属性设置为true：

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

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

这里是最终结果。
要为画布设置静态背景，您只需在css中为身体或容器设置背景图像。将渲染器设置为透明非常重要，这样才能工作（否则渲染器的背景会覆盖背景图像）。要执行此操作，请将渲染器
alpha
设置为
true
：

// Create renderer and set alpha to true
renderer = new THREE.WebGLRenderer({
    alpha: true
});

然后，以下css将完成此工作：

div#container {
  position: relative;
  height: 100%;
  width: 100%;
  background-image: url("https://i.imgur.com/eoWNz.jpg");

  /* some additional styling to center it nicely */
  background-repeat: no-repeat;
  background-position: center;
  position: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover !important;
}

为一把漂亮的小提琴演示了
+1。但是，它不会加载的事实与
fiddle
不允许跨源代码这一事实无关吗？我需要将完整的代码粘贴到某个地方：）我编辑了这个问题，并在本地得到了错误。也许它能让你更好地了解出了什么问题。是的，它没有定义，因为纹理没有加载…：）显然，现在从
localhost
中，我在
控制台中再也看不到与此代码相关的错误：
var loader=new THREE.TextureLoader（）；var texture=loader.load（'https://imgur.com/gallery/eoWNz');。但背景仍然是黑色的，你注意到了吗？我在你的评论中没有看到
onLoad
回调。第二个参数应该是回调。在回调中，你应该将纹理添加到背景中…非常感谢！这两个场景的想法是因为我想创造这样的东西：。只有一件事：你知道为什么背景没有覆盖整个窗口并且在立方体前面吗？@d_z90它在前面，因为你设置了
backgroundMesh.material.depthTest=false和
backgroundMesh.material.depthWrite=false。我不知道你为什么那样做。您将其加载到尺寸为2 x 2的
平面几何体上，因此其尺寸仅为2 x 2。。。如果你想加载它作为背景，你不应该加载在几何体上…多谢了，伙计！我在这个问题上挣扎了两个小时：）那你建议怎么办。因为我看到这是将场景背景设置为自定义图像的唯一方法。@d_z90我用另一种解决方案添加了另一个答案酷！这是一种可能的选择。我只是担心我在调整窗口大小时会遇到问题。但另一方面，我只需要在平面维度上渲染纹理一次，对其进行细分，然后在鼠标悬停时分解并重新压缩它。我要试一试；）谢谢你，威尔特！
div#container {
  position: relative;
  height: 100%;
  width: 100%;
  background-image: url("https://i.imgur.com/eoWNz.jpg");

  /* some additional styling to center it nicely */
  background-repeat: no-repeat;
  background-position: center;
  position: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover !important;
}