在three.js中顺序显示多个对象答案

【问题标题】：Displaying multiple objects sequentially in three.js在three.js中顺序显示多个对象
【发布时间】：2020-09-30 17:43:35
【问题描述】：

我有 20 个对象，我正在使用 three.js 创建网格和纹理。您可以看到示例对象。

我正在尝试做的是，我显示我的第一个对象，然后让它在屏幕上停留一段时间，然后将其关闭并显示我的新对象。这样，我想按顺序显示我的 20 个对象。等待时间对我来说很重要，我希望这个时间在 0.5 左右。我该怎么做。

将所有网格添加到一个数组中：

for ( var i = 0; i < count; i ++ ) {

    geometry = // new geometry ... 
    material = // new material ...
    //the lines above are unnecessary
    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
    objects.push(mesh);
  
}

这是渲染部分：

函数渲染（）{ requestAnimationFrame(render);

for ( var i = 0; i < count; i ++ ) {
    
        var mesh = objects[ i ];
    
    }

renderer.render(scene, camera);

}

正如我所说，在显示我的第一个对象 0.5 秒后，我必须将其关闭并显示我的另一个对象。但我找不到解决方案。我该怎么办？

【问题讨论】：

需要依次调用scene.remove和scene.add
@StrangerintheQ 但如何控制显示时间？

标签： javascript three.js

【解决方案1】：

你只需要这样的东西：

let index = Math.floor(t/500) % meshes.length;

完整示例：

const renderer = new THREE.WebGLRenderer({antialias:true});
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 10);
camera.position.setScalar(1.3);
camera.lookAt(scene.position);

const material = new THREE.MeshNormalMaterial();

const meshes = [
  new THREE.BoxGeometry(),
  new THREE.SphereGeometry(),
  new THREE.CylinderGeometry(),
  new THREE.ConeGeometry(),
  new THREE.IcosahedronGeometry(),
  new THREE.OctahedronGeometry(),
  new THREE.TorusGeometry(),
  new THREE.TorusKnotGeometry(),
  new THREE.DodecahedronGeometry(),
].map(geometry => new THREE.Mesh( geometry, material ));

let currentIndex = null;
 
requestAnimationFrame(function render(t) {

    if (renderer.width !== innerWidth || renderer.height !== innerHeight){
      renderer.setSize(innerWidth, innerHeight);
      camera.aspect = innerWidth/innerHeight;
      camera.updateProjectionMatrix();
    }
     
    const index = Math.floor(t/500) % meshes.length;
    if (currentIndex !== index) {
      scene.remove(meshes[currentIndex]);
      scene.add(meshes[index])
      currentIndex = index;
    }

    scene.rotation.y += 0.01;

    renderer.render(scene, camera);
    requestAnimationFrame(render);
});

body { margin: 0; overflow:hidden}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/107/three.min.js"&gt;&lt;/script&gt;

【讨论】：