Labels with CSS2DRenderer, and one hidden behind a wall
The blue wall hides the ball behind it. The Bell label (the ball) fades because a ray from the camera to it hits the wall first.
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
Wall visible
Bell behind something: faded
Headlight visible
label divs in the page: 3
a label's CSS transform is set by CSS2DRenderer: true