Create a shared 3D scene that renders in the browser.

Today everything changes. You've been designing on paper and building text prototypes — now we enter the third dimension. Watch this quick overview of what Three.js can do, then we'll explore some live demos together.

Video: Build a Mindblowing 3D Portfolio Website — Fireship (12 min)

Fireship walks through building a 3D website with Three.js from scratch. Watch for the moment he creates a scene, camera, and renderer — that's exactly what you'll do today.

Discussion after watching: What surprised you about what's possible in a browser? What do you think all 3D scenes have in common — what are the essential ingredients?

A 3D world requires four things: a Scene (the container for everything), a Camera (the viewer's eyes), a Renderer (draws the scene to the screen), and an Animation Loop (redraws every frame). This architecture is identical for both games.

Before writing any code, visit the Three.js examples gallery together:

threejs.org/examples

Explore 3-4 demos together. Click, rotate, zoom. Try these:

  1. Search for "geometry" — find a simple shapes demo. Rotate it around.
  2. Search for "lights" — see how lighting changes the mood.
  3. Search for "camera" — notice how different camera types change the view.
  4. Pick one that looks cool — just play with it for a minute.

Key question: "What do ALL of these demos have in common?" The answer: every single one has a Scene (container), a Camera (viewpoint), and a Renderer (draws to screen). That's the foundation of every 3D web experience — and it's exactly what you'll build today.

Now open your code editor. We'll live-code the first scene together, starting with the absolute minimum: scene + camera + renderer + one flat plane.
Ami — Combat Risk Engine

Scene = Manhattan prototype. Flat ground plane, gray color. This is the foundation of the world your player will explore.
Ida — Economic Growth Engine

Scene = 14-lot block prototype. Flat ground plane, green color. This is the land your player will build on.

Install Three.js via CDN script tag in your HTML:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>

Create the Scene, Camera, and Renderer:

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

Add a ground plane:

const ground = new THREE.Mesh( new THREE.PlaneGeometry(50, 50), new THREE.MeshStandardMaterial({ color: 0x808080 }) // gray for Ami, 0x00aa00 green for Ida ); ground.rotation.x = -Math.PI / 2; scene.add(ground);

Add a directional light:

const light = new THREE.DirectionalLight(0xffffff, 1); light.position.set(10, 20, 10); scene.add(light);

Position the camera and create the animation loop:

camera.position.set(0, 20, 20); camera.lookAt(0, 0, 0); function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate();
  • Add Three.js via CDN script tag
  • Create Scene + PerspectiveCamera + WebGLRenderer
  • Add PlaneGeometry as ground plane
  • Add basic directional light
  • Create animation loop
  • Position camera above and angled downward
  • Resize browser window — does the scene break? (Bonus: add a window resize handler)
    •
    Checkpoint

    Page loads. You see a flat plane in 3D. Camera is positioned above looking down.

    No textures. No models. No details. Just a plane and a light.

    Forgetting to append renderer.domElement to the document — the scene exists but nothing appears on screen.

    Camera pointing wrong direction — if you don't set position and lookAt, the camera may face empty space.

    Forgetting the animation loop — the scene appears frozen because it only renders once.

    This is the first visual moment — let them enjoy it. When the flat plane appears on screen, that's magic. Don't rush past it. Let them rotate the view (if OrbitControls is on) and just look at it.

    The examples gallery is crucial. Spending 10 minutes clicking through threejs.org/examples builds mental context. They'll understand what's possible before they write a line of code. Guide them to notice: every demo has a scene, camera, and renderer — same foundation, infinite variety.

    Explain the animation loop simply: "Even though nothing moves yet, the computer is redrawing this scene 60 times per second. It's like a flipbook where every page is the same — but tomorrow, we'll start changing the pages." This sets up the mental model for all future animation.

    If they get frustrated with setup: CDN script tags can be confusing. Help them understand that the script tag loads the Three.js library from the internet, just like loading a YouTube video. The browser downloads it and makes it available.

    Tomorrow: We control the camera — you'll choose how your player sees the world. Same scene, completely different feeling depending on the angle.