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

Question

我想用Threejs创建一个360度的图像视图。我有4张图片，其中1张与threejs相关联，其余3张像缩略图一样位于页面底部，所以当我点击缩略图时，360图像视图应该会改变。

我的Codepen，BTW它的360图像是黑色的，它没有出现在codepen中，但在localhost中工作正常。 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;