threejs-animation
Keyframe, skeletal, and morph target animation system for Three.js objects and models.
- Supports four animation track types: number, vector, quaternion, and color keyframes with linear, smooth, and discrete interpolation modes
- AnimationMixer plays clips on objects with full playback control: play, stop, pause, speed adjustment, weight-based blending, and fade in/out transitions
- Skeletal animation via bone manipulation, bone attachments, and GLTF model loading with automatic clip discovery and playback
- Morph target blending for shape deformation, plus additive animation blending for layering effects like breathing over base poses
- Procedural animation patterns including smooth damping, spring physics, and oscillation helpers for custom motion without keyframes
Three.js Animation
Quick Start
import * as THREE from "three";
// Simple procedural animation
const clock = new THREE.Clock();
function animate() {
const delta = clock.getDelta();
const elapsed = clock.getElapsedTime();
mesh.rotation.y += delta;
mesh.position.y = Math.sin(elapsed) * 0.5;
requestAnimationFrame(animate);
renderer.render(scene, camera);
More from cloudai-x/threejs-skills
threejs-fundamentals
Three.js scene setup, cameras, renderer, Object3D hierarchy, coordinate systems. Use when setting up 3D scenes, creating cameras, configuring renderers, managing object hierarchies, or working with transforms.
4.3Kthreejs-shaders
Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.
3.6Kthreejs-geometry
Three.js geometry creation - built-in shapes, BufferGeometry, custom geometry, instancing. Use when creating 3D shapes, working with vertices, building custom meshes, or optimizing with instanced rendering.
3.5Kthreejs-interaction
Three.js interaction - raycasting, controls, mouse/touch input, object selection. Use when handling user input, implementing click detection, adding camera controls, or creating interactive 3D experiences.
3.3Kthreejs-materials
Three.js materials - PBR, basic, phong, shader materials, material properties. Use when styling meshes, working with textures, creating custom shaders, or optimizing material performance.
3.2Kthreejs-postprocessing
Three.js post-processing - EffectComposer, bloom, DOF, screen effects. Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders.
2.9K