three.js in a few lines: a lit cube
renderer.info counts what the GPU was asked to do. One box is 6 faces × 2 triangles = 12 triangles, drawn in 1 draw call.
3D 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.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
List four kinds of website where you have seen 3D, and for each one say what the visitor can do that a photo would not allow.
A shop wants a 3D model of every product, but customers only ever look at them from the front. What would you recommend, and why?
Explain it without notes
Explain to a friend why a 3D scene can answer questions a set of photos can't.
Name three costs of putting 3D on a page, and one case where you would use a photo instead.
Console
Nothing logged yet.Expected console output
three.js version: 186
draw calls: 1
triangles: 12