How 3D Works in a Browser

You will never write Three.js. But knowing how it works in plain terms makes you a better prompter because you understand what Claude is building and you can describe changes precisely.

The three building blocks

Every 3D scene has three things. Without all three nothing appears on screen.

A scene is the first building block. Think of the scene as an empty room. Everything you want to exist, including objects, lights, and particles, gets placed into this room. It is the container for everything.

A camera is the second building block. The camera is your viewpoint into the room. It determines what you see, from what angle, and how close or far. Most 3D websites use a perspective camera which is the same kind of perspective your eyes use where things look smaller the further away they are.

A renderer is the third building block. The renderer takes the scene and the camera and produces the actual image you see on screen. It runs this calculation 60 times per second which is why 3D feels smooth and live rather than like a static image.

How objects exist in 3D space

Every object in a Three.js scene has three coordinates. X is the horizontal position covering left and right. Y is the vertical position covering up and down. Z is the depth position covering closer and further away.

When you ask Claude to "move the sphere slightly to the right and closer to the viewer" you are asking it to adjust the X and Z coordinates. You do not need to say X and Z because plain English works. But knowing the system helps you understand what Claude is doing and describe changes more precisely.

How objects are made

Every 3D object is built from two parts.

Geometry is the shape. A sphere, a cube, a torus which is a donut shape, a flat plane, or a custom form. The geometry defines what kind of object it is.

Material is the surface. Is it shiny, matte, wireframe? Does it react to light? The material defines how the object looks and feels.

If geometry is the clay, material is the paint and finish.

How lights work

Lights in Three.js behave like real lights.

Ambient light fills everything evenly like an overcast sky. Point light is a single bulb emitting in all directions. Directional light works like the sun with parallel rays coming from a specific angle. Spot light is a cone of light focused on a specific area.

You do not need to set lights manually. Your prompts should describe the mood you want, such as "softly lit from above with a warm tone," and Claude handles the rest.

The animation loop

The reason 3D websites feel alive is the animation loop. Every single frame, 60 times per second, Three.js updates positions, rotations, and particle coordinates, renders the scene from the camera's viewpoint, and pushes that image to the canvas on screen.

This is how a sphere appears to slowly rotate. Each frame its rotation increases by a tiny amount. At 60 frames per second that becomes smooth continuous motion.

How mouse interaction works

When you move your mouse the browser knows your exact X and Y pixel position. Three.js can convert those pixel coordinates into 3D scene coordinates. Then any object or particle can check its distance from the cursor and respond accordingly.

This is how particle effects appear to avoid the cursor. Each particle checks its distance from the mouse position and moves away if it is within a certain radius.

File structure

Every 3D website built in this course uses three files:

my-3d-project/

├── index.html     ← page structure, CDN links, canvas element
├── style.css      ← layout, fonts, text styling
└── main.js        ← all Three.js code, animation loop, interactions

CDN links go in the head of index.html. No npm, no build tools, no terminal commands needed:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

The mental model

When you prompt Claude for a 3D effect you are describing five things.

What objects exist in the scene. What they look like in terms of shape, colour, and material finish. How they move including rotation speed, drift direction, and response to mouse. How the scene is lit. And what happens on scroll or user interaction.

The next lessons give you exact prompts for each major effect. The mental model above is what turns those prompts from copy-paste exercises into something you can customise and troubleshoot with confidence.