I am currently working with three.js to create mesh and textures for 20 different objects. Below, you will find an example object.
My goal is to display each of these 20 objects sequentially on the screen. I want to show the first object, have it stay on the screen for a brief moment (approximately 0.5 seconds), then turn it off and display the next object in line. The timing between displaying the objects is crucial for me. How can I achieve this?
To start, I am adding all the meshes to an 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);
}
Here is the section related to rendering:
The render function is as follows:
function render() {
requestAnimationFrame(render);</p>
for ( var i = 0; i < count; i ++ ) {
var mesh = objects[ i ];
}
renderer.render(scene, camera);
}
As previously mentioned, after showing the first object for 0.5 seconds, I need to turn it off and display the next object. However, I'm having trouble finding a solution. What steps should I take?