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，使用simple http server python来解决有关跨源图片的安全问题，但背景仍然存在黑色。

你有没有机会知道我做错了什么？这是带有完整代码的fiddle。

提前感谢您的回复！

修改

我在THREE.Material: 'map' parameter is undefined.

中收到此错误：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 以及最终结果。

Answer 2

要为画布设置静态背景，只需在css中为您的身体或容器设置background-image即可。将渲染器设置为透明以使其工作非常重要（否则渲染器的背景将覆盖背景图像）。为此，请将渲染器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;
}

展示 here in this fiddle 。

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

2 个答案: