Displaying multiple objects sequentially in three.js

Question

I have 20 objects and I'm creating mesh and textures with three.js. You can see the example object.

What I'm trying to do is exactly, I display my first object, then let it stay on the screen for a while, then turn it off and display my new object. In this way, I want to show my 20 objects in order. The waiting time is important to me, I want this time to be around 0.5. How can I do it.

Adding all meshes a array:

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);
  
}

And this is the render part:

function render() { requestAnimationFrame(render);

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

renderer.render(scene, camera);

}

As I said, 0.5 seconds after showing my first object, I have to turn it off and show my other object. But I couldn't find a solution. What should I do?

Stranger in the Q Stranger in the Q · Accepted Answer · 2020-09-29T17:11:22

You just need something like this:

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

Full example:

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}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/107/three.min.js"></script>

Displaying multiple objects sequentially in three.js

1 Answers