By my understanding, you have a couple of tasks on your plate:
- Adjust the camera position
- Reveal the boxes sequentially
CAMERA ADJUSTMENT
To start off, create a global variable:
let pastTime = performance.now();
Next, craft an update() function and execute it within your animate() function:
function update() {
const currentTime = performance.now();
const timeElapsed = currentTime - pastTime; // calculating how much time has passed since last frame
pastTime = currentTime;
adjustCamera(timeElapsed);
}
The adjustCamera() function should look like this:
function adjustCamera(timeElapsed) {
const SPEED = 10; // set as per your preference
const CameraMoveDirection = new THREE.Vector3(1,0,0);
CameraMoveDirection.multiplyScalar( SPEED * timeElapsed );
camera.position.add(CameraMoveDirection);
}
Camera movement completed.
SEQUENTIAL BOX REVEAL
You'll need a reference for your boxes. Define a variable boxes and store your objects there:
var camera, controls, scene, renderer, boxes = [];
...
// before scene.add( mesh );
mesh.visible = false ; // initially hiding all boxes
boxes.push(mesh);
In your update() function, after adjustCamera(timeElapsed), invoke showBoxes().
The question now is: when do we reveal the boxes? Let's say we want to unveil them as the camera moves past.
function showBoxes() {
// Assuming camera is moving along X axis (like previous function). Modify as needed.
const boxesToDisplay = boxes.filter( box => !box.visible && box.position.x < camera.position.x);
for( let i=0 ; i < boxesToDisplay.length ; i++ ) {
setTimeout( () => boxesToDisplay[i].visible=true, i * 1000 );
}
}