Build Your First 3D Scene

Before You Study (5 mins)

Lesson focus: The exact same technology used in web games, metaverse projects, and even parts of Fortnite is free for you to use. It's called Three.js.

What you should have ready:

• Your themed Snake Game
• An open mind (3D can feel intimidating, but AI makes it easy!)

Quick Concepts

Think About

Before studying, consider:

1. How does a computer know how to draw a 3D cube on a flat screen?
2. What if your Snake game wasn't flat, but had depth?

By the End

After this lesson, you'll:

• ✅ Understand the 3D coordinate system
• ✅ Know what a Scene, Camera, and Renderer are
• ✅ Have a working 3D Snake Game!

Welcome to the third dimension! 🧊

What We Learned

• 3D is accessible: You don't need a supercomputer or expensive software.
• Three.js is the magic library that powers 3D on the web.
• The Core Recipe: To make 3D, you need 3 things:
  1. Scene (The world)
  2. Camera (The eye)
  3. Renderer (The painter)
• AI makes it easy: You didn't need to do the complex math; the AI did it for you.

Key Code Snippets

// Every 3D scene starts here
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, w/h, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

Checklist

• I converted my 2D game to 3D
• I can see the snake moving in 3D space
• I added lighting (so it's not pitch black!)
• I can rotate or move the camera

Quick Quiz

Q1: Which axis usually represents "forward/backward" in 3D?

• A) X
• B) Y
• C) Z ✓

Q2: What is a "Mesh"?

• A) A messy code file
• B) A 3D object made of geometry and material ✓
• C) A type of camera

Q3: What library did we use for 3D?

• A) One.js
• B) Two.js
• C) Three.js ✓

Bonus Challenge

Ask the AI to change the "Camera Angle" to "Top-Down" and then back to "Third-Person" behind the snake. See how it changes the feel!

Next Lesson

Lesson 4: How Developers Actually Work — The Terminal

You'll learn: How to unlock "Hacker Mode" on your computer.

You're officially a 3D developer! 🕹️