Phase 8 · part: Handlebar and stem
Interaction
Click, tap and press keys in 3D: raycasting, pointer events, hover, labels, keyboard twins and picking at scale. The showroom shows each bike part's name and price.
Until now the customer could only watch. This phase lets them touch. You turn a click into a ray, find the part it hit, tell a click from a drag, handle mouse, finger and pen, and put HTML labels over the 3D picture.
Everything you build here has a keyboard twin, because a pointer is not the only way to use a page.
At the end the showroom has a panel. Click the handlebar, tap it, or Tab to it in a list and press Enter: the part glows and the panel shows its name and price.
Phase 8 · the brief from Lumen
Lena, QA at Lumen Bikes, testing on a cheap Android phone
“I tapped the handlebar five times and nothing happened. Then it worked once. Then the page scrolled instead.”
Ama's showroom turns, but it does not answer. She wants a customer to click a part and see what it is and what it costs. Kofi adds a click handler, finds the part under the pointer, and it works on his laptop at the first try.
Lena tests it on her phone. A thin tube is two pixels wide under a finger. A tap that moves a little is a drag, and a drag turns the bike instead of choosing. Ravi, who uses only a keyboard, reaches nothing.
At this station
You will learn
- Turn a click or tap into a ray and find the part it hit, from a canvas anywhere on the page
- Tell a click from a drag, and handle mouse, touch and pen with pointer events
- Put HTML labels over 3D points, and give every pointer action a keyboard twin
- Keep picking fast with layers, and name the next steps when it is not enough
You write code in
In your lumen-3d project (npm run dev) and in the editor on this page
Files you touch
- index.html
- src/main.js
- src/objects/bike.js
- src/systems/picking.js
- src/ui/panel.js
Work order · 6 steps
- 8.1Raycasting and PickingA 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. 22 min 3 live scenes
- 8.2Pointer Events: Hover, Click and DragPointer events give one set of events for a mouse, a finger and a pen. You use them to highlight a part on hover (once per frame), to tell a click from a drag by distance, to change the cursor, and to treat touch honestly: a finger has no hover. 22 min 2 live scenes
- 8.3HTML Labels over 3DLabels 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. 21 min 2 live scenes
- 8.4Keyboard ControlsEvery pointer action gets a keyboard twin: arrows turn, plus and minus zoom, Tab walks through the parts, Enter chooses. The canvas needs a way to take focus, a visible focus ring, and no keyboard trap. 21 min 2 live scenes
- 8.5Picking at ScaleA ray asks every object in its list if it was hit. With 10,000 objects that is 10,000 questions per pick. You count the questions, cut them with layers and a short list, and meet GPU picking, which reads one pixel instead. 21 min 2 live scenes
- 8.6Build: Pick a PartbuildThe showroom learns to answer. Click or tap a part, or Tab to it in a list: it glows and a panel shows its name and price. The bike gains its handlebar and stem. 37 min 1 live scene
Quality control · 4 tests
Build it yourself, press Check, and the page tests the scene you made: what is in it, where it sits, what it costs the GPU.
pointerdown handler turns the click into coordinates with the window's size, so it never hits the cube.IntermediateQC-02Choose on a click, not at the end of a dragThis page chooses the cube the moment the pointer goes down, so a drag that starts on the cube also chooses it. Choose on pointerup instead, and only when the pointer moved at most 6 px since it went down.IntermediateQC-03Give the viewer a keyboard#host can take focus but ignores keys. In its keydown handler make ArrowLeft and ArrowRight turn cube by 15 degrees on rotation.y (left is minus) and handle nothing else.IntermediateQC-04Pin a label to a 3D pointplaceLabel(point) must put #tag on top of a 3D point: project the point, convert to pixels (y flips), set style.left and style.top in px and show it.Intermediate