Frustum culling, and a bounding sphere that lies
A fixed 300 x 150 picture. "Middle of the picture" reads the real pixel after render().
The cheapest triangle is the one you never send. Frustum culling skips what the camera cannot see; LOD swaps in simpler meshes as objects get far away. Both depend on numbers you must keep true.
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.
Add a fourth level to the LOD example: a billboard PlaneGeometry shown beyond 60 m. What do the triangles read at 80 m?
A tree sits at 8 m behind a house, inside the camera's view. Is it drawn?
Explain it without notes
A mesh with a custom vertex shader disappears when you pan the camera so that its original position leaves the screen. Why, and what are the fixes?
Does three.js avoid drawing an object hidden behind another? Explain.
Console
Nothing logged yet.Expected console output
ball cut by the edge of the view draw calls: 1 | middle of the picture: background
ball outside the view draw calls: 0 | middle of the picture: background
same ball, frustumCulled = false draw calls: 1 | middle of the picture: background
camera turned away from the ball draw calls: 0 | middle of the picture: background
stretched wall, centred draw calls: 1 | middle of the picture: orange
stretched wall, its centre off screen draw calls: 0 | middle of the picture: background
... with frustumCulled = false draw calls: 1 | middle of the picture: orange
... with a bounding sphere of radius 10 draw calls: 1 | middle of the picture: orange