Build Your First 3D Scene

Before You Study (5 mins)

Lesson focus: The same rendering technology that powers parts of Fortnite, Google Earth, and most modern web games is free, browser-native, and accessible through a JavaScript library called Three.js. Today we go from a 2D Snake game to a small 3D scene — and the goal is not to build the next Fortnite. The goal is to internalize the mental model of how 3D actually works on a flat screen, so the next time you read 3D code, it feels like reading a story instead of decoding hieroglyphics.

What you should have ready:

• VS Code from Lesson 02, configured and ready
• Your project folder with the Snake game
• An open mind — 3D feels intimidating, but the math is doing the heavy lifting; you're orchestrating
• About 60 minutes; the first 30 are reading, the next 30 are typing

The Concept

Every 3D scene rendered in a browser is the same recipe: a Scene, a Camera, and a Renderer. Memorize this triple and the rest follows.

• A Scene is the 3D world. It contains every object you place inside it — meshes, lights, helpers. Think of it as an empty stage.
• A Camera is the viewer's eye. It has a position (where in the world it sits), a direction (where it's looking), and a field of view (how wide its lens is). Move the camera, and everything looks different.
• A Renderer is the painter that takes the Scene and the Camera and produces a 2D image of pixels — frame after frame, sixty times a second.

The library that makes this accessible from JavaScript is Three.js, originally created by Ricardo Cabello (mr.doob). Under the hood, Three.js calls WebGL — a browser API that lets JavaScript send instructions to the GPU on your laptop or phone. The GPU is the part of your hardware that exists specifically to do millions of small math operations in parallel. That is what makes 3D fast enough to feel real-time.

Every 3D object in a Three.js scene is a Mesh — a combination of two things:

• Geometry — the shape: a list of vertices (points in 3D space) connected into triangles. A cube is 8 vertices, 12 triangles. A sphere is many more.
• Material — how the surface looks: color, shininess, transparency, whether it's affected by light. Same geometry + different material = same shape, different look.

To position anything in 3D, you use three coordinates: X (left/right), Y (up/down), Z (forward/back). By Three.js convention, the camera looks down the negative-Z axis — so an object placed at (0, 0, -5) sits five units in front of the default camera. This convention varies between engines (Unity uses Y-up; Blender uses Z-up); knowing your engine's convention is the first thing to check when an object "appears in the wrong place."

The animation loop is the final piece. To make 3D move, you call renderer.render(scene, camera) inside a function that runs every frame, scheduled by requestAnimationFrame. Each frame, you change something (an object's position, the camera's angle, a light's intensity) and re-render. Sixty times per second; smooth enough to look continuous.

The math behind 3D — perspective projection, transformation matrices, the dot products that compute lighting — is genuinely deep, and you don't need to derive it to use it. Three.js handles the math; you handle the artistic and architectural choices. As your work gets ambitious, you'll dip into the math one piece at a time. For now, build the model in your head, write the recipe, and let the GPU do the rest.

Quick Concepts

What We Will Build

By the end of this lesson, you will have done these specific things:

1. Created a fresh HTML file (3d-scene.html) and added a single <canvas> element where the 3D rendering will land.
2. Pulled in Three.js via a CDN script tag (no npm setup needed for this lesson).
3. Created a Scene, a PerspectiveCamera, and a WebGLRenderer in JavaScript.
4. Built one Mesh: a cube made of BoxGeometry + MeshStandardMaterial. Added it to the scene.
5. Added one light: a DirectionalLight (without lights, MeshStandardMaterial appears black).
6. Written an animation loop using requestAnimationFrame that rotates the cube on each frame.
7. Loaded the page and watched a colored cube rotate smoothly in the browser window.
8. Asked the AI assistant to convert the cube into a snake-shaped chain of cubes — one cube per snake segment — and observed how the geometry changes while the rendering pipeline stays identical.

Steps 7 and 8 are the goal. Once you have a rotating cube, the recipe is unlocked: every 3D scene you build for the rest of your life is a variation of Scene, Camera, Renderer, Mesh, Light, animate.

Think About

Before studying, consider:

1. Your screen is a flat 2D grid of pixels. How does the computer turn a "cube" — a thing with depth — into colors on flat pixels? (Hint: perspective projection is just trigonometry, and the GPU does it for you.)
2. If a game runs at 60 frames per second, your animation function runs 60 times every second. What does that say about how cheap each individual frame's computation must be?

By the End

After this lesson, you'll:

• ✅ Understand the Scene–Camera–Renderer triple and never forget it
• ✅ Know what a Mesh is (geometry + material) and why both matter
• ✅ Be able to read a Three.js coordinate system without confusion
• ✅ Have a working rotating-cube scene in your browser
• ✅ Have shipped a 3D version of one element from your Snake game

Welcome to the third dimension. The math runs on the GPU; you run the story. 🧊

What We Learned

• Every 3D scene is a recipe of three: a Scene (the world), a Camera (the eye), a Renderer (the painter that produces pixels). Memorize this triple.
• Three.js is a JavaScript wrapper around WebGL, which is the browser's API for talking to your GPU. The GPU is the part of your computer designed for parallel math; it's what makes 3D fast.
• A Mesh is geometry + material. Geometry is the shape (vertices and triangles); material is how the surface looks (color, shininess, lighting response). Swap one without swapping the other, and you change one quality at a time.
• You need lights. With MeshStandardMaterial (and most realistic-looking materials), a scene with no lights renders pitch black. A DirectionalLight is the simplest fix.
• Animation is a loop. requestAnimationFrame runs your function once per display frame (~60 times a second on most monitors). Each frame, you mutate the scene and call renderer.render() again.
• The (X, Y, Z) convention varies between engines. In Three.js, the camera looks down −Z by default. Knowing your engine's convention is the first debug step when an object "appears in the wrong place."

Commands We Used

<!-- Pull Three.js from a CDN — no npm setup for this lesson -->
<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js"
  }
}
</script>

The minimal "rotating cube" recipe:

import * as THREE from 'three'

// 1. Scene
const scene = new THREE.Scene()
scene.background = new THREE.Color(0x0b0c15)

// 2. Camera (75° FOV, aspect from window, near/far clip planes)
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
)
camera.position.z = 5

// 3. Renderer attached to the page
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

// 4. A cube mesh = geometry + material
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshStandardMaterial({ color: 0xe53935 })
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)

// 5. One light (without it, MeshStandardMaterial renders black)
const light = new THREE.DirectionalLight(0xffffff, 1.5)
light.position.set(5, 5, 5)
scene.add(light)

// 6. Animation loop — runs once per frame (~60Hz)
function animate() {
  cube.rotation.x += 0.01
  cube.rotation.y += 0.01
  renderer.render(scene, camera)
  requestAnimationFrame(animate)
}
animate()

Forty lines. That is the complete recipe for "I rendered a 3D cube in the browser." Every more elaborate scene you'll ever read is a variation on this.

Why It Matters

The 3D web isn't a niche anymore — Google Earth, parts of Fortnite (its frontend menus and Creative-mode tools), product configurators on e-commerce sites, AR previews, and an entire generation of indie games run in browsers via WebGL. The cost of entry has collapsed; the skill is in choosing what to build and how to make it feel good.

What this lesson glossed over deliberately:

• Performance budgets — every 3D app on the web has to keep within ~16ms per frame to stay smooth at 60Hz. The moment your scene has thousands of objects or complex shaders, you start measuring and optimizing.
• Physics, collisions, and game logic — Three.js renders; it doesn't simulate. Libraries like Cannon.js or Rapier handle physics; full game frameworks like PlayCanvas or Babylon.js bundle rendering + physics + audio + input.
• Asset pipelines — real 3D content (characters, environments) is authored in tools like Blender and exported to formats like glTF. Loading them is one more line; making them look good is its own discipline.
• Shaders — the small programs that run on the GPU and decide pixel colors. Three.js gives you good defaults; writing your own shaders unlocks the visual styles that make games memorable.

For most engineers, "I can build a 3D scene that loads in a browser" is enough — and being able to read Three.js code is more useful than being able to write your own ray-tracer. The pipeline you set up today is the same pipeline behind serious commercial WebGL work; you'll add complexity selectively when you need it.

Checklist

• I created an HTML file and pulled in Three.js via CDN
• I built a Scene, a Camera, and a WebGLRenderer
• I added a Mesh (cube) — BoxGeometry + MeshStandardMaterial
• I added at least one light (without it, my cube was black)
• I wrote an animation loop using requestAnimationFrame and saw the cube rotate
• I asked the AI assistant to extend the cube into a snake-segment chain
• I can name the three things every 3D scene needs (Scene, Camera, Renderer)

Quick Quiz

Q1: What is a Mesh in Three.js?

• A) A messy code file that needs cleanup
• B) A 3D object built from a geometry (shape) and a material (look) ✓
• C) A type of camera angle

Q2: What does the renderer actually produce?

• A) Sound
• B) A 2D image of pixels, frame after frame ✓
• C) The geometry of the scene

Q3: Why does a MeshStandardMaterial cube render black if you forget the light?

• A) The browser blocks unlit content
• B) Standard materials respond to lighting; with no lights, no light reflects ✓
• C) It's a known bug in Three.js

Q4: What runs your animation function 60 times a second?

• A) setInterval(fn, 16)
• B) requestAnimationFrame(fn), scheduled by the browser to align with the display refresh ✓
• C) The CPU's hardware timer interrupt

Q5: What does WebGL talk to under the hood?

• A) Disk
• B) Network
• C) The GPU — the parallel-math hardware on your machine ✓

Bonus Challenge

Make the cube respond to your mouse. Replace the constant cube.rotation.x += 0.01 with rotation values driven by mouse position: as the cursor moves left/right, rotate the cube on Y; as it moves up/down, rotate on X. Three lines of math, one event listener. The cube becomes the most basic interactive 3D object — and when you do this once, the door to creative WebGL work opens.

Next Lesson

Lesson 04: How Developers Actually Work — The Terminal

You'll learn: Every serious developer spends as much time in a black-screen terminal as they do in their editor. We'll get past the cinematic "hacker mode" intimidation and learn the dozen commands that actually move the work forward.

The third dimension is now in your hands. The painter, the eye, the world. 🧊