Skip to main content

Three.js Animation Tutorial

Animation is a key aspect of creating dynamic 3D scenes in Three.js. This tutorial will guide you through the process of animating objects, using keyframe animations, and integrating animation libraries like GSAP (GreenSock Animation Platform) to enhance your Three.js projects.

1. Introduction to Animation in Three.js​

Three.js provides various ways to animate objects in a 3D scene. You can animate properties like position, rotation, and scale over time. Animations can be achieved using manual updates in the animation loop, keyframe animations, or third-party libraries.

Key Concepts​

  • Animation Loop: The main loop where rendering and updates occur.
  • Keyframe Animation: Define specific points in time and interpolate between them.
  • Animation Mixer: Manage animations for objects that have skeletal structures.

2. Basic Animation Using the Animation Loop​

Step 1: Setting Up the Scene​

Create a basic Three.js scene with a cube that you will animate:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

Step 2: Animating the Cube​

You can animate the cube by updating its properties in the animation loop:

function animate() {
    requestAnimationFrame(animate); // Call animate again for the next frame

    // Rotate the cube for animation
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera); // Render the scene
}

animate(); // Start the animation loop

3. Using the Animation Mixer for Keyframe Animation​

For more complex animations, you can use the AnimationMixer, which is particularly useful for skeletal animations. For this example, we’ll use an animated model in GLTF format.

Step 1: Load an Animated Model​

Make sure to include the GLTFLoader in your project to load models:

<script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>

Step 2: Create the Animation Mixer​

Load the model and create an AnimationMixer:

const loader = new THREE.GLTFLoader();
loader.load('path/to/animated_model.glb', (gltf) => {
    const model = gltf.scene;
    scene.add(model);

    // Create an AnimationMixer for the loaded model
    const mixer = new THREE.AnimationMixer(model);

    // Add animations from the loaded model
    gltf.animations.forEach((clip) => {
        mixer.clipAction(clip).play(); // Play the animation
    });
});

Step 3: Update the Mixer in the Animation Loop​

Update the mixer in the animation loop to advance the animations:

function animate() {
    requestAnimationFrame(animate);
    
    // Update the animation mixer
    if (mixer) mixer.update(0.01); // Update with delta time

    renderer.render(scene, camera);
}

animate(); // Start the animation loop

4. Using GSAP for Smooth Animations​

GSAP is a powerful library for creating high-performance animations. It can be easily integrated with Three.js to animate properties of objects smoothly.

Step 1: Include GSAP​

You can include GSAP in your project via CDN:

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

Step 2: Animate Properties Using GSAP​

You can animate the cube's position or any other property using GSAP:

gsap.to(cube.position, {
    duration: 2, 
    x: 3,         // Move to x = 3
    y: 1,         // Move to y = 1
    z: 0,         // Move to z = 0
    repeat: -1,   // Repeat indefinitely
    yoyo: true    // Reverse animation on repeat
});

5. Conclusion​

In this tutorial, you learned about different methods for animating objects in Three.js, including using the animation loop, AnimationMixer for keyframe animations, and integrating GSAP for smooth transitions. With these techniques, you can create dynamic and engaging 3D experiences.

Further Reading​

Content Review​

The content in this repository has been reviewed by chevp. Chevp is dedicated to ensuring that the information provided is accurate, relevant, and up-to-date, helping users to learn and implement programming skills effectively.

About the Reviewer​

For more insights and contributions, visit chevp's GitHub profile: chevp's GitHub Profile.