Create the three parts and look at what you got
The values come from this scene's own renderer. The alpha line shows the r186 behaviour: the context has alpha, the default clear alpha is 1.
Every three.js app has three parts: a scene that holds things, a camera that decides what is seen, and a renderer that draws it. You learn the renderer's options, what render() sends to the GPU, and the console warnings you will meet.
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 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Add a THREE.FogExp2 to the first example's scene and a second, farther cube. What do the status bar numbers do?
Write the one line that tells you the WebGL version your renderer really got.
Explain it without notes
What do the scene, the camera and the renderer each do? What happens if one is missing?
Why can renderer.info.render.calls be 1 while the canvas shows nothing?
Console
Nothing logged yet.Expected console output
before render: calls 0 | frame 0
after render: calls 1 | triangles 12 | frame 1
context alpha: true | clear alpha: 1 | depth: true
WebGL version: 2