Phase 0 · part: Display stand
Start Here: Your First Scene and the Plan
What 3D on the web is, what you will build and get, where you write code (this page, then your computer), and your first scene: a turning display stand.
This phase is your map and your first tools. Before any theory you find out what 3D on the web is good for (and when it is the wrong choice), what the whole course teaches, what you can build at the end, and exactly where you will type your code: first in the editor on this page, then in a small project on your own computer.
Then you draw. Fifteen lines of three.js put a turning cube on the screen. You change its colour, size and speed, break it on purpose and learn the five-step checklist for the most common problem in 3D: a black screen with no error.
At the end you start the project you will grow for the whole course, the Lumen Bikes 3D showroom, and build its first part: a round display stand that turns slowly under the lights. Every later phase adds one more part, until a customer can turn, paint and ride the bike in their browser.
Phase 0 · the brief from Lumen
Ama, head of design at Lumen Bikes
“Our new e-bike only exists as photos. I want people to turn it, paint it and ride it, right on our website.”
Lumen Bikes rents bikes from 25 stations across Ardenvale, a small island city, and this spring it starts selling its own e-bike, the LB-01. The website shows six photos of it. Customers keep writing to ask the same things: "What does the back look like?", "Is the orange really that bright?", "Will the big frame fit me?"
Ama, the head of design, wants a showroom in the browser: the bike on a stand, turning slowly. Drag it to look anywhere. Click a part to see what it is and what it costs. Pick a colour and watch the paint change. Take a short test ride. And it must work on a cheap phone, with a keyboard, and for someone who cannot see the screen.
That is a lot, so the team builds it one part at a time. In this phase you set up the place where you write code and build the first part: the display stand.
At this station
You will learn
- Say what 3D on the web is used for, and when a photo or a video is the better choice
- Say what this course teaches, in order, and what you can build when you finish it
- Write and run three.js code in the editor on this page, then in a Vite project on your own computer
- Find the cause of a black screen with a five-step checklist
- Start the lumen-3d project folder you will grow for the whole course
You write code in
In the editor on this page first; from Topic 0.4, also in your own lumen-3d project (Node.js and a code editor)
Files you touch
- index.html
- src/main.js
Work order · 6 steps
- 0.1What 3D on the Web Is3D on the web is a scene your page describes in JavaScript and the visitor's own graphics chip draws, about 60 times a second, so they can turn it, change it and play with it. It is powerful, and it has real costs. 21 min 2 live scenes
- 0.2Your Path and What You GetTwenty phases take you from a turning cube to a fast, accessible 3D showroom you can ship: the route in one story, what you will be able to do at the end, the jobs and interviews it prepares you for, and what you need first. 20 min 1 live scene
- 0.3Your First Scene on This PageFifteen lines make a turning cube: a scene, a camera, a renderer, one mesh and a loop. You change its colour, size and speed, learn what every line does, and learn the five-step checklist for a black screen. 23 min 3 live scenes
- 0.4Set Up Your ComputerInstall Node.js, open a terminal, create a Vite project called lumen-3d, add three.js 0.186.1, start the dev server and see your cube in the browser. Every command has its real output, and every common failure has a fix. 21 min 1 live scene
- 0.5The Project You Will BuildYour lumen-3d folder grows into the whole showroom. Here is its final layout, one line per folder and file, which phase adds what, and how the build topics work. 18 min 1 live scene
- 0.6Build: The Display StandbuildReplace the cube with the showroom's first part: a round display stand that turns slowly under the lights, in a page set up for the whole course. 19 min 1 live scene
Quality control · 4 tests
Build it yourself, press Check, and the page tests the scene you made: what is in it, where it sits, what it costs the GPU.
crate, 0.5 m on each side, in any material.BeginnerQC-03Fix the black screenThis scene shows nothing and prints no error. Use the five-step checklist from Topic 0.3 to find the three problems and fix them.BeginnerQC-04Build a display stand with a markBuild the showroom stand yourself: a cylinder named stand, radius 1 and 0.06 m tall, whose top is at y = 0.Beginner