Mode:
Duration:
1
Coding works best on desktop or with an external keyboard.
Bouncing Sphere - Threejs-animation Typing CST Test
Bouncing Sphere — Threejs-animation Code
Animates a sphere bouncing up and down using sine wave.
# threejs/demo/BouncingSphere.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/three@0.150.1/build/three.min.js"></script>
</head>
<body>
<script>
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
const geometry = new THREE.SphereGeometry(1, 32, 32)
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
const sphere = new THREE.Mesh(geometry, material)
scene.add(sphere)
camera.position.z = 5
let t = 0
function animate() {
requestAnimationFrame(animate)
t += 0.05
sphere.position.y = Math.sin(t) * 2
renderer.render(scene, camera)
}
animate()
</script>
</body>
</html>Threejs-animation Language Guide
Three.js Animation System is a powerful, flexible framework for keyframe-based animations of 3D objects, cameras, materials, and morph targets. It uses AnimationMixer, AnimationClips, and KeyframeTracks to animate properties over time with smooth interpolation and precise timeline control.
Primary Use Cases
- ▸Object and camera animations
- ▸GLTF character and skeletal animations
- ▸Morph target and facial animations
- ▸Scene transitions and cinematic sequences
- ▸3D product demos and interactive experiences
Notable Features
- ▸AnimationMixer for global control
- ▸AnimationClip for reusable timelines
- ▸KeyframeTrack system
- ▸Interpolation modes (linear, cubic, quaternion)
- ▸Blendable and cross-fade animations
Origin & Creator
Three.js Animation System was introduced and evolved by the Three.js open-source community led by Ricardo Cabello (mrdoob). It matured significantly between 2014-2020 with GLTF-centric animation workflows.
Industrial Note
Three.js Animation is heavily used in web-based product configurators, architectural walkthroughs, scientific simulations, cinematic scenes, NFT 3D viewers, interactive landing pages, and real-time motion graphics.
Quick Explain
- ▸Three.js uses AnimationMixer to manage playback of animations on 3D objects.
- ▸AnimationClips contain reusable timeline data for objects, materials, cameras, and skeletons.
- ▸KeyframeTracks define value changes across time with interpolation.
- ▸Supports skeletal animation, morph targets, camera motion, and custom property animation.
- ▸Animation system integrates with GLTF loaders for production-friendly workflows.
Core Features
- ▸KeyframeTrack variants (Vector, Quaternion, Boolean, Color, Number)
- ▸AnimationAction for clip playback
- ▸Action warping, looping, clamping
- ▸Cross-fading and blending
- ▸Morph target & skeletal animation support
Learning Path
- ▸Basics of KeyframeTracks
- ▸Understanding AnimationMixer
- ▸Using GLTF animations
- ▸Advanced blending techniques
- ▸Camera/morph/skeletal animation mastery
Practical Examples
- ▸Rotating object animation
- ▸Morph target facial animation
- ▸Character walk/idle/run blending
- ▸Camera dolly and path animation
- ▸Full GLTF character action system
Comparisons
- ▸Three.js Animation vs GSAP -> GSAP is timeline-based, Three.js is property-based
- ▸Three.js vs Reanimated -> Web 3D vs mobile UI
- ▸Three.js vs Unity WebGL -> Unity is heavier with built-in animation tools
- ▸Three.js vs Babylon.js -> Babylon has a stronger integrated animation editor
- ▸Three.js Keyframes vs skeletal -> skeletal is best for characters
Strengths
- ▸Highly flexible keyframe-based system
- ▸Works seamlessly with GLTF pipelines
- ▸Supports blending multiple animations smoothly
- ▸Great for complex interactive scenes
- ▸Lightweight and efficient for WebGL
Limitations
- ▸No node-based timeline editor built-in
- ▸Requires manual sequencing for complex animations
- ▸Interpolation may require fine-tuning
- ▸Large animation data increases file size
- ▸Not an all-in-one motion engine like GSAP
When NOT to Use
- ▸Simple CSS/web animations
- ▸Non-3D websites
- ▸2D sprite-based animations
- ▸Projects needing editor-based timelines (use GSAP)
- ▸Games requiring advanced state machines (use Godot/Unity)
Cheat Sheet
- ▸const mixer = new AnimationMixer(object);
- ▸const action = mixer.clipAction(clip);
- ▸action.play();
- ▸mixer.update(deltaTime);
- ▸Use tracks: VectorKeyframeTrack, QuaternionKeyframeTrack, NumberKeyframeTrack
FAQ
- ▸Can Three.js animate cameras? -> Yes, any property.
- ▸Does it support skeletal animation? -> Fully supported.
- ▸Can I use GLTF animations? -> Yes, recommended.
- ▸Can I blend actions? -> Yes, with crossFade.
- ▸Do I need GSAP? -> No, but useful for sequencing.
30-Day Skill Plan
- ▸Week 1: KeyframeTrack and Clip basics
- ▸Week 2: Character animation imports
- ▸Week 3: Blending and transitions
- ▸Week 4: Camera path animation
- ▸Week 5: Full scene cinematic sequencing
Final Summary
- ▸Three.js Animation System provides a flexible and powerful keyframe-based animation engine.
- ▸Ideal for 3D object, camera, morph, and skeletal animations.
- ▸Supports blending, looping, warping, and GLTF pipelines.
- ▸Great for interactive 3D scenes and cinematic motion.
- ▸Lightweight, efficient, and production-ready for the web.
Project Structure
- ▸scene/ - base Three.js setup
- ▸animations/ - imported clips or custom tracks
- ▸models/ - GLTF or FBX assets
- ▸controls/ - user input & camera logic
- ▸render/loop.js - mixer.update & rendering
Monetization
- ▸Premium animated 3D product demos
- ▸High-end interactive marketing sites
- ▸3D e-commerce configurators
- ▸Animated brand identity pages
- ▸Licensable animation-driven 3D components
Productivity Tips
- ▸Use gsap.to for hybrid timelines
- ▸Bake animations in Blender for accuracy
- ▸Leverage GLTF morph targets
- ▸Cache mixers and clips
- ▸Use animation helpers (SkeletonHelper)
Basic Concepts
- ▸AnimationMixer - animation controller
- ▸AnimationClip - collection of tracks
- ▸KeyframeTracks - property/value timeline
- ▸AnimationAction - controls playback
- ▸Interpolants - blend between keyframes