Build a 3D Platformer
Jump into 3D! Build a Mario-style platformer with Three.js — coins, stars, moving platforms, and a follow camera.
About this course
It's more advanced, but every lesson explains the new ideas in plain language before you build. By the end you'll have a real 3D level you can explore and share.
12 lessons
Stepping Into 3D
Understand the big leap from 2D to 3D: now things have depth, and a 'camera' decides what you see. You'll plan your platformer world and its goal.
Meet Three.js
Set up Three.js and learn its three building blocks — a scene (the world), a camera (your eyes), and a renderer (the painter). You'll get a spinning cube on screen.
Building a 3D World
Add a floor, a sky, and some lights so your world looks real and inviting. You'll learn why 3D scenes need lighting to look good.
Your Hero Character
Drop in a character — a simple shape to start, or an AI-generated 3D model. You'll position it on the ground and point the camera at it.
Running and Turning in 3D
Move your character around the world with the keys and make it face the way it's going. Movement in 3D uses an extra direction, and we'll make it feel natural.
Jump Physics That Feel Good
Add gravity and a satisfying jump — quick lift, floaty peak, snappy fall. Great jumping is the soul of a platformer, so we'll tune it carefully.
The Follow Camera
Make the camera trail behind the hero smoothly, like an invisible helper holding it. You'll avoid the jerky camera that ruins so many 3D games.
Collecting Coins and Stars
Scatter spinning coins and a big shiny star to collect. You'll detect when the player touches them, play a chime, and count them up.
Moving and Falling Platforms
Build platforms that slide back and forth or drop away after you step on them. This turns a flat level into an exciting obstacle course.
Checkpoints and Respawning
Add flags that save your progress so a fall sends you back a little, not all the way. You'll keep the game challenging but never frustrating.
Winning the Level
Place a goal that ends the level when reached, with a victory pose and a 'Level Complete!' screen showing coins and stars collected.
Polish and Share
Add background music, a title screen, and little effects like a landing puff. Then export your 3D game and send the link to friends.