#2 Simple Animation Example

The easiest way to animate your scene is to change the positions of objects over time.

animate() is a function that gets called every frame to update the scene and render it again. By slightly changing object properties (like position) each frame, you create the illusion of continuous motion:

function animate() {

    // Update position

    cube.position.x += 0.01;

    // Render the scene

    renderer.render( scene, camera );

}

Here the x component of the cube's position is increased a little bit every frame, making the cube slide smoothly to the right.

#3 User Control

Here are some useful events that W3C defines:

• MouseEvent

• KeyboardEvent

• TouchEvent

By listening to these input events, you can make your application respond to user actions. Input events are triggered whenever a user presses a key, moves the mouse, or interacts with the screen.

The simplest thing you can do with a keyboard event is implement WASD key movement to control an object, like a camera:

document.addEventListener( 'keydown', ( event ) => {

    if ( event.code == 'KeyW' ) camera.translateZ( -STEP );

    if ( event.code == 'KeyS' ) camera.translateZ(  STEP );

    if ( event.code == 'KeyA' ) ) camera.translateX( STEP );

    if ( event.code == 'KeyD' ) camera.translateX(  STEP );

} );

• If the pressed key matches W, A, S, or D, the camera is moved accordingly

• STEP controls how far the camera moves with each key press

#4 Continuous Input Response

Now every time you press a button, your object moves at a fixed distance. This does the job, but it just doesn't feel natural because movement only happens once per key press, not continuously as you hold the key.

Here's a trick to achieve continuous updates that make the object move smoothly while a key is pressed down. The idea is to store key state data in memory and respond to the current key state rather than reacting to individual key events.

Listen for keyboard events to track which keys are currently pressed using a hash map:

document.addEventListener( 'keydown', ( event ) => {

    keyMap.set( event.code, true );

} );

document.addEventListener( 'keyup', ( event ) => {

    keyMap.set( event.code, false );

} );

Instead of moving the object immediately on key press, you check the hash map during every frame update:

function update() {

    if ( keyMap.get( 'KeyW' ) ) camera.translateZ( -STEP );

    if ( keyMap.get( 'KeyS' ) ) camera.translateZ(  STEP );

    if ( keyMap.get( 'KeyA' ) ) camera.translateX( STEP );

    if ( keyMap.get( 'KeyD' ) ) camera.translateX(  STEP );

}