javascript - 三个 js。单击另一个纹理/图像更改纹理负载

Question

我想用 Threejs 创建一个 360 ImageView 。我有 4 张图像，其中 1 张与 threejs 链接在一起，其余 3 张像缩略图一样位于页面底部，因此当我单击缩略图时，360 度 ImageView 应该会发生变化。

我的 Codepen , 顺便说一句，它的 360 图像是黑色的，它没有出现在代码笔中，但在本地主机中工作正常。本地主机预览如下。您可以在底部看到另外 3 张图片。

我的本​​地主机图像代码。

var material = new THREE.MeshBasicMaterial( {
                map: new THREE.TextureLoader().load( 'assets/image3.jpg' )
            } );

Answer 1

您只需更新球体的 Material 。只需先预加载所有图像并将它们存储为 Material 。另外，我猜用户正坐在您的球体中。您只需渲染 backSide。

//globals
var images = [];

//preload
for (var i = 0; i < numberOfImages; i++) {
var loadImage = new THREE.TextureLoader().load('path/to/image/imageName_'+i, function(texture) {

     var material = new THREE.MeshBasicMaterial({map:texture, side:THREE.BackSide});

     images.push(material);
  }
}

然后在单击缩略图时，像在 load 事件中一样更新 Material ，从数组中选择正确的 Material 并设置球体的平面 object.material.needsUpdate = true

编辑:您也可以简单地将预加载的纹理存储在数组中并更新现有的material.map。不要忘记标记 object.material.needsUpdate = true;