Lesson 1
The three ingredients
Every three.js picture needs the same three things. Think of a theatre:
SceneThe stage. Everything you want to show goes onto it.
CameraYour eyes. It decides where you look from.
RendererThe painter. It paints what the camera sees onto the screen.
drag to look around
Press both buttons and watch what changes. When the painter stops, the picture freezes, even though the box is still turning inside the computer.
const scene = new THREE.Scene(); // the stage
const camera = new THREE.PerspectiveCamera(50, width / height); // the eyes
const renderer = new THREE.WebGLRenderer(); // the painter
scene.add(box); // put the box on the stage
renderer.render(scene, camera); // paint one picture
Quick check: which one paints the picture onto your screen?
Lesson 2
Shapes: geometry + material = mesh
A 3D object is called a mesh. It is made of two parts:
the geometry is the shape (a rounded box, a ball…), and the material is the skin (its color and how shiny it is).
Every shape is secretly built from tiny flat triangles. Turn on "wireframe" to see them.
Try this: pick the sphere, turn on wireframe, and count roughly how many triangles go around the middle.
Quick check: what two things does a mesh need?
Lesson 3
Moving things: position, rotation, scale
3D space has three directions, called axes:
x goes left–right (red line),
y goes up–down (green line),
z goes towards you and away (blue line).
Every object has a position (where), a rotation (turned how far) and a scale (how big).
Good to know: three.js measures turning in radians, not degrees. A full turn (360°) is 2 × π ≈ 6.28 radians. Watch the number in the code change as you move the rotation slider.
Quick check: which axis points up?
Lesson 4
Light and shadow
Without light, a 3D world is pitch black, just like a room at night. Some materials react to light and some ignore it.
The little yellow ball is the light bulb. Ambient light is soft light that comes from everywhere, like a cloudy sky.
Try this: set ambient light to 0 and move the bulb behind the box. Then switch to MeshBasicMaterial. What happens?
Quick check: which material ignores light completely?
Lesson 5
Animation: many pictures per second
Movement on a screen is a trick, just like in a cartoon flip-book. The computer paints a still picture,
changes things a tiny bit, and paints again, about 60 times every second. This repeating is called the animation loop.
function animate() {
box.rotation.y += speed * delta; // turn a tiny bit
ball.position.y = Math.abs(Math.sin(time)); // bounce up and down
renderer.render(scene, camera); // paint one picture
requestAnimationFrame(animate); // ...and do it all again
}
animate();
Try this: tick "slow motion". Now you can see the single pictures, like a flip-book.
Quick check: why does the box seem to move?
Lesson 6
The camera and perspective
The camera has a field of view (short: fov): how wide it can see, in degrees.
A small number is like a zoom lens (you see less, but bigger). A big number is like a fish-eye lens.
Things far away look smaller: that is called perspective.
Quick check: a small field of view is like…
Lesson 7
Putting it together: a solar system
Objects can carry other objects, like a parent carrying a child. In three.js this is a Group.
The Moon sits inside the Earth's group, so when the Earth travels around the Sun, the Moon comes along,
and it still circles the Earth at the same time. This is called a scene graph (a family tree of objects).
const earthOrbit = new THREE.Group(); // an invisible "arm" from the Sun
scene.add(earthOrbit);
earth.position.x = 3.2; // put Earth at the end of the arm
earthOrbit.add(earth); // Earth is a child of the arm
earth.add(moonOrbit); // the Moon's arm is a child of Earth
// in the animation loop: just turn the arms
earthOrbit.rotation.y += 0.3 * delta;
moonOrbit.rotation.y += 2.0 * delta;
Quick check: when the Earth's group turns, what happens to the Moon?
Your turn
Look inside and change it
This whole lesson is one web page, and you can read all of its code.
- Right-click the page and choose View page source (or press Ctrl+U). Everything you played with is in there.
- Press F12 to open the developer tools, where programmers see error messages. You can't break anything there.
- To try your own version, save the page (Ctrl+S), open the saved file in Notepad, search for
#006cff (the blue at the head of the gradient) and change it to another color such as #ff3366. Open the file in your browser again: the boxes now fade to a new color.
Want more? The official site threejs.org/examples has hundreds of demos, and the code is on GitHub.