3d-orbit-inspect-demo

Installation
SKILL.md

3D Orbit and Inspect

Three.js · WebGL. No OrbitControls, no custom shaders.

The mechanism: hover leans the camera a few degrees around the object with a gain that rises only while a raycast hits it, and click hands the object (not the camera) to a second render layer that lifts it to a fixed spot in front of the lens. The two modes share no state except one rule: the lean freezes whenever a click is possible or the piece is in the hand. Remove that rule and the target slides out from under the click.

Nearest skills: webgl-3d-object (a floating mesh, no inspect), 3d-virtual-tour (its "orbit inspection" is one mode of a walkthrough; the camera itself flies). Reach for this when there is one object and two gestures on it.

Reuse demo.html: the joint, the room, the lean, the lift and the return are all in one module. Copy updateLean, updateHand, openInspect, closeInspect, the pointer block and draw. Swap the meshes for your own object; nothing else names the joint except FROM, RR and Q_BENCH.

What is and is not in the source

Kibori (kibori.html, section "8b. Inspect — pick an item up") has click-to-lift with drag-to-turn, an idle wheel, a "Look closer" cue and a zoom-in cursor on hover, and close by click-away, Esc, scroll or its Close button. It has no hover orbit: the camera only leans a few degrees as scroll dollies it between stations. It also has no free zoom, because wheel is the page scroll and closes the piece. So:

  • Ported unchanged: the item is lifted, the camera is not flown; the layer-1 second pass; the 1-(1-k)^4.4 lift ease; 1.0 s in, 0.60 s home, 0.28 s fast close; the way home straightens before it descends (sstep(0,.36) then sstep(.24,1)); drag 0.0085 / 0.0065 rad per px; spin damping exp(-2.4 dt); idle turn 0.26 rad/s after 2.2 s; click = under 6 px and 600 ms; the band between the top bar and the caption; the cue pill. Not ported: Kibori's hand-written tone-mapping pass and blur of the room behind the piece; the demo uses ACESFilmic and a flat dim.
  • Built here in the Kibori manner: the hover lean, the wheel/pinch dolly, arrow-key and +/- control, focus return, the live region, the touch sway.

Rules, each with the failure it prevents

Installs
251
Repository
mengto/skills
GitHub Stars
6.9K
First Seen
Sep 30, 2026