Threejs Animation

Three.js Animation is a community skill for creating animations in Three.js, covering keyframe animation, skeletal animation, morph targets, animation mixing, and physics-based motion for interactive 3D web experiences.

What Is This?

Overview

Three.js Animation provides guidance on implementing animations in Three.js 3D scenes. It covers keyframe animation that interpolates object properties like position, rotation, and scale over time, skeletal animation that drives character meshes through bone hierarchies loaded from 3D models, morph targets that blend between geometry shapes for facial expressions and deformations, animation mixing that blends multiple clips for smooth transitions between states, and physics-based motion that applies forces and constraints for realistic movement. The skill helps developers create dynamic 3D experiences.

Who Should Use This

This skill serves web developers adding animation to 3D scenes, game developers building interactive characters, and creative developers creating animated web experiences.

Why Use It?

Problems It Solves

Static 3D scenes lack engagement without motion and interactivity. Implementing smooth animation transitions manually requires complex interpolation logic. Character animations from 3D tools need proper integration with the Three.js animation system. Significant performance issues arise from unoptimized animation loops.

Core Highlights

Keyframe animator interpolates object properties over time. Skeleton driver plays character animations from loaded models. Morph blender transitions between geometry shapes. Animation mixer manages clip playback and transitions.

How to Use It?

Basic Usage

// Keyframe animation
import * as THREE from
  'three';

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

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

// Keyframe tracks
const posTrack =
  new THREE
  .VectorKeyframeTrack(
    '.position',
    [0, 1, 2],
    [0,0,0, 2,2,0,
     0,0,0]);

const rotTrack =
  new THREE
  .QuaternionKeyframeTrack(
    '.quaternion',
    [0, 1, 2],
    [0,0,0,1,
     0,0.7,0,0.7,
     0,0,0,1]);

const clip =
  new THREE.AnimationClip(
    'move', 2,
    [posTrack, rotTrack]);

const mixer =
  new THREE.AnimationMixer(
    cube);
const action = mixer
  .clipAction(clip);
action.play();

const clock =
  new THREE.Clock();
function animate() {
  requestAnimationFrame(
    animate);
  mixer.update(
    clock.getDelta());
}
animate();

Real-World Examples

// Animation state machine
import * as THREE from
  'three';

class AnimationState {
  constructor(mixer, clips) {
    this.mixer = mixer;
    this.actions = {};
    this.current = null;
    for (const clip
      of clips) {
      this.actions[
        clip.name] =
        mixer.clipAction(
          clip);
    }
  }

  play(name, fade = 0.3) {
    const next =
      this.actions[name];
    if (!next) return;
    if (this.current) {
      this.current
        .fadeOut(fade);
    }
    next.reset()
      .fadeIn(fade)
      .play();
    this.current = next;
  }

  update(dt) {
    this.mixer.update(dt);
  }
}

// Usage with loaded model
// const mixer =
//   new THREE
//   .AnimationMixer(model);
// const sm =
//   new AnimationState(
//     mixer,
//     model.animations);
// sm.play('idle');
// sm.play('walk');

Advanced Tips

Use crossFadeTo for smooth transitions between animation clips instead of abrupt switches. Set animation weight and time scale on actions to blend multiple animations simultaneously. Cache animation actions to avoid recreating them on every state change.

When to Use It?

Use Cases

Animate a product model rotating and highlighting features on a marketing page. Build character animations with idle, walk, and run states that blend smoothly. Create camera animations that guide users through a 3D scene.

Related Topics

Three.js, WebGL, 3D animation, keyframes, skeletal animation, morph targets, and interactive graphics.

Important Notes

Requirements

Three.js library installed in the project for 3D rendering and animation playback. A WebGL-capable browser for running Three.js scenes with hardware-accelerated graphics. Animated 3D models exported in glTF format with embedded skeletal rigs and morph target data for character animations.

Usage Recommendations

Do: use the AnimationMixer for managing all animations in a scene to ensure synchronized playback. Dispose of unused animation clips and actions to free memory. Profile animation frame rates on target devices to maintain smooth performance.

Don't: create new AnimationMixer instances per frame since this wastes resources. Skip delta time in update calls since animations will play at inconsistent speeds. Load heavy animation data synchronously since this blocks the render loop.

Limitations

Complex skeletal animations with many bones impact performance on mobile devices. Animation blending quality depends on clip compatibility and matching bone structures. Procedural animations require custom code implementations beyond the built-in keyframe animation system.