The hit list: glass, hit-boxes, layers
Three boxes in a row along the ray. The first hit is glass, even though you can see through it. Each line changes one thing.
A click gives two pixel numbers. A ray from the camera through that pixel finds the first object it touches. You convert the pixel with the canvas's own box, read the hit list, and meet the cases that surprise people: empty space, glass, hidden hit-boxes and a canvas that is not in the page's corner.
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 ndcFromEvent(event, canvas) that returns a THREE.Vector2 in NDC from a pointer event, using the canvas's box.
Write firstPart(hits, names) that returns the first hit whose object, or any ancestor, has a name in names, or null.
Explain it without notes
A click at clientX = 400, clientY = 200 on a canvas whose box is left 100, top 50, width 600, height 300 happens in the middle of the canvas. What are the NDC values, and what would the innerWidth formula give on a 1000 × 800 window?
A customer clicks a part that has a transparent glass cover in front of it. What does intersectObjects return, and how do you pick the part anyway?
Console
Nothing logged yet.Expected console output
before the first render: nothing
scene.children, not recursive: nothing
scene.children, recursive: glass@3.9, hitbox@4.4, cube@4.9
hitbox.visible = false: glass@3.9, hitbox@4.4, cube@4.9
first hit that is not glass: hitbox
glass on layer 1: hitbox@4.4, cube@4.9
raycaster sees layers 0 and 1: glass@3.9, hitbox@4.4, cube@4.9