三个js。单击另一个纹理/图像时更改纹理加载

Question

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

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

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

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

Answer 1

您只需要更新球体的材质。只需先预加载所有图像并将它们存储为材料。另外，我猜用户正坐在你的球体内。你只需要渲染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 事件中一样更新材质，从数组中选择正确的材质并设置球体的平面 object.material.needsUpdate = true

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