#3 Three.js Animation

Three.js Animations: 10-Module Blog Tutorial

Module 1: Setting Up Three.js

Learn how to set up the basic scene, camera, and renderer for a Three.js animation project.

// Basic Three.js setup
import * as THREE from 'three';

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);
      

Module 2: Adding a Spinning Cube

Create a cube and animate it with rotation.

// Cube geometry and animation
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x0077ff });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();
      

Module 3: Adding Lighting

Enhance the scene with ambient and directional lights.

// Lighting in Three.js
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(5, 10, 7.5);
scene.add(directionalLight);
      

Module 4: Responsive Canvas

Make the renderer responsive to window size changes.

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth/window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});
      

Module 5: Textures and Materials

Load a texture and apply it to your mesh.

// Texture loader
const loader = new THREE.TextureLoader();
loader.load('texture.jpg', function(texture){
  cube.material.map = texture;
  cube.material.needsUpdate = true;
});
      

Module 6: Animation Mixers

Use AnimationMixer for more advanced model animations.

// Animation Mixer usage
const mixer = new THREE.AnimationMixer(scene);
// Assume 'clip' is a loaded animation clip
const action = mixer.clipAction(clip);
action.play();

// In animation loop:
const clock = new THREE.Clock();
function animate() {
  requestAnimationFrame(animate);
  mixer.update(clock.getDelta());
  renderer.render(scene, camera);
}
      

Module 7: Importing 3D Models

How to load external 3D models (GLTF or OBJ) into Three.js.

// Loading GLTF models
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
const gltfLoader = new GLTFLoader();
gltfLoader.load('model.gltf', (gltf) => {
  scene.add(gltf.scene);
});
      

Module 8: Camera Controls

Implement interactive camera controls using OrbitControls.

// OrbitControls setup
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
      

Module 9: Particle Systems

Create animated particle effects in your scene.

// Particle system
const particles = new THREE.Points(
  new THREE.BufferGeometry().setAttribute(
    'position',
    new THREE.BufferAttribute(new Float32Array([0,0,0, 1,1,1, ...]), 3)
  ),
  new THREE.PointsMaterial({ color: 0xffffff, size: 0.02 })
);
scene.add(particles);
      

Module 10: Final Animation and Effects

Combine all previous modules and add post-processing effects.

// Example final animation loop (add effects as needed)
function animate() {
  requestAnimationFrame(animate);
  controls.update();
  // mixer/update, particle animations, etc.
  renderer.render(scene, camera);
}
animate();