Projecting by hand: behind the camera, off-screen, too many
No drawing here: the example is the numbers. Read the two checks separately: x and y alone say a point behind the camera is on screen.
Labels are easiest as real HTML placed over the canvas. CSS2DRenderer does the placing; project() lets you do it yourself. You handle labels behind the camera, off-screen, hidden behind the bike and far too many of them.
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.
Write labelPosition(point, camera, width, height) that returns { x, y } in pixels, or null if the point is off screen or behind the camera.
Write nearestLabels(points, camera, count) that keeps only the count nearest points that are in front of the camera.
Explain it without notes
Why can a label for a point behind the camera still appear in the middle of the screen if you only check x and y after project()?
Why does the showroom's label layer need pointer-events: none?
Console
Nothing logged yet.Expected console output
straight ahead pixel 400 200 | x,y on screen: true | depth ok: true | show label: true
high and to the right pixel 545 132 | x,y on screen: true | depth ok: true | show label: true
far off to the right pixel 1269 200 | x,y on screen: false | depth ok: true | show label: false
behind the camera pixel 400 200 | x,y on screen: true | depth ok: false | show label: false
behind, to the left pixel 641 200 | x,y on screen: true | depth ok: false | show label: false
beyond the far plane pixel 400 200 | x,y on screen: true | depth ok: false | show label: false
500 label spots -> on screen: 152 | drawn (nearest 12): 12