Learn 3D with the Who's Good AU Box

The three ingredients

Every three.js picture needs the same three things. Think of a theatre:

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

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.

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

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.

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

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.

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

scene
 └─ sun
 └─ earthOrbit (Group)
     └─ earth
         └─ moonOrbit (Group)
             └─ moon

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;

Look inside and change it

This whole lesson is one web page, and you can read all of its code.

1. Right-click the page and choose View page source (or press Ctrl+U). Everything you played with is in there.
2. Press F12 to open the developer tools, where programmers see error messages. You can't break anything there.
3. 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.