@solidrt/3d 0.0.56 → 0.0.58

package/README.md

@@ -97,7 +97,8 @@ named channel to a geometry's interleave, `withColors` is the `aColor`
 vec4 case - tint, baked AO, any four scalars - and materials read channels
 by name), one perspective camera
 with an orbit control (`<OrbitCamera>` as a Scene child, or
-`createOrbitCamera` imperatively: drag, pinch/wheel zoom, auto-orbit),
+`createOrbitCamera` imperatively; drag, pinch/wheel zoom and a pad reach
+it through an input map the app binds, auto-orbit),
 mesh picking with pointer events, scene backgrounds, transparency, and
 lights (`lit` material with hemisphere ambient, up to four directional
 light nodes, Blinn-Phong highlight and triplanar mapping).

package/examples/README.md

@@ -21,10 +21,14 @@ depends on `@solidrt/3d` (or in-repo from the package directory).
   target: `lookAt` for a +z solid, `quatFromTo` for aiming a y-axis cone,
   and a `quatSlerp` damped follow that visibly lags; all driven from
   onFrame through refs, no per-frame signals.
-- `pick.tsx` - mesh pointer events: hover tints (enter/leave), click
-  pops (down), a Group hearing its children's clicks through bubbling
-  and one mesh stopping the walk; a STATIC scene rendered only when an
-  event changes something, with hit testing over the scene's BVH.
+- `pick.tsx` - mesh pointer events under an `<OrbitCamera>`, the scene
+  as the root of the walk: hover tints (enter/leave), a tap pops, a drag
+  on the crate slides it over the floor without orbiting (its down claims
+  the press), a drag elsewhere orbits and a wheel zooms through the feed
+  listening at the root, the ring claims the wheel to spin, a tap on
+  nothing un-pops (the scene's own `onTap` with `mesh` null), and a
+  Group hears its children's downs through bubbling; a STATIC scene
+  rendered only when an event changes something.
 - `scene-background.tsx` - a fragment-GLSL background drawn inside the
   scene's own pass (`<Scene background>`): one target, no stacked
   backdrop texture, no resize plumbing; the source is shader-target
@@ -85,10 +89,11 @@ depends on `@solidrt/3d` (or in-repo from the package directory).
   Drag to orbit; the `formation` and `state` debug commands drive it
   headlessly.
 - `first-person.tsx` - a first-person walk: `<FirstPersonCamera>` over
-  a walled courtyard of shadow-casting pillars, WASD/arrows and the pad
-  sticks to walk, mouse look under pointer lock (click locks, Escape
-  releases - the app's calls, not the control's), a drag to look on
-  touch; `clampPosition` keeps the walker inside the walls, the whole of
+  a walled courtyard of shadow-casting pillars, driven by an input map
+  the app binds (`firstPersonBindings`: WASD/arrows and the pad sticks
+  to walk, the scene's drag to look on touch, mouse motion while the
+  pointer is locked - click locks, Escape releases, the app's calls, not
+  the control's); `clampPosition` keeps the walker inside the walls, the whole of
   the collision a camera control offers; the `pose` debug command reads
   and sets the pose headlessly.
 - `collision.tsx` - collision without a physics engine: the same walker
@@ -137,6 +142,12 @@ depends on `@solidrt/3d` (or in-repo from the package directory).
   transparent dome and a mesh without normals) parsed with `parseGltf`
   from a binary import and built by `createModel` into a Group of named
   parts; clicking a part hides it, clicking the body restores all.
+- `wireframe.tsx` - the rover drawn solid, as a wireframe or as its
+  feature edges: `wireframeGeometry`/`edgesGeometry` build "lines"
+  geometry over each part's own vertices (one shared vertex upload, a
+  second index buffer) and `setGeometry`/`setMaterial` swap it onto the
+  live mesh, no node touched. Space, a tap on the rover, or the `wire`
+  debug command (`{ mode: "solid" | "wireframe" | "edges" }`) cycles.
 - `model-load.tsx` - the same rover loaded ASYNC with `loadModel` from
   `assets/` under a `<Loading>` boundary: the async read lives in a memo,
   a second memo derives the scene JSX after that read, and the shell

package/examples/collision.tsx

@@ -11,13 +11,15 @@
 // click locks the pointer, Escape releases it. Debug commands: `pose`
 // (read/set), `walk` ({ dx, dz } through the collision), `jump`, `fall`
 // ({ dt }: one airborne step by hand, for headless checks), `state`.
-import { createSignal, lockPointer, onFrame, pct, pointerLocked, render } from "@solidrt/core"
+import { createInputMap, createPointerFeed, createSignal, gamepad, keyboard, lockPointer, onFrame, pct, pointerLocked, render } from "@solidrt/core"
 import type { PointerEvent } from "@solidrt/core"
 import {
   box,
   cylinder,
   DirectionalLight,
   FirstPersonCamera,
+  firstPersonActions,
+  firstPersonBindings,
   HemisphereLight,
   lit,
   Mesh,
@@ -68,6 +70,14 @@ let feetOf = (eye: Vec3): Vec3 => [eye[0], eye[1] - EYE, eye[2]]
 function App() {
   let scene!: SceneHandle
   let camera!: FirstPersonCameraHandle
+  // The walker's input plus the game's own `jump` action: the standard
+  // first-person bindings, and Space or the pad's south button for the
+  // jump - one map, read by name (ARCHITECTURE.md).
+  let pointer = createPointerFeed()
+  let pad = gamepad()
+  let input = createInputMap({ ...firstPersonActions, jump: "button" })
+  input.bind(firstPersonBindings({ pointer, gamepad: pad, keyboard }))
+  input.bind("jump", keyboard.key("Space"), pad.button("south"))
   let [hud, setHud] = createSignal("")
   let [near, setNear] = createSignal<Set<number>>(new Set())
   // The same set, readable synchronously (a signal read right after its
@@ -135,6 +145,7 @@ function App() {
     grounded = false
     fall()
   }
+  input.onPress("jump", jump)
 
   let lastHud = 0
   onFrame(tick => {
@@ -204,9 +215,11 @@ function App() {
   return (
     <window
       onKeyDown={e => {
+        input.handlers.onKeyDown(e)
         if (e.key === "Escape") lockPointer(false)
-        if (e.key === " " || e.code === "Space") jump()
       }}
+      onKeyUp={input.handlers.onKeyUp}
+      onBlur={input.handlers.onBlur}
     >
       <view
         width={pct(100)}
@@ -215,9 +228,9 @@ function App() {
           if (e.pointerType === "mouse") lockPointer(true)
         }}
       >
-        <Scene ref={s => (scene = s)} clearColor={[0.6, 0.72, 0.88, 1]} samples={4} label="collision">
+        <Scene ref={s => (scene = s)} clearColor={[0.6, 0.72, 0.88, 1]} samples={4} label="collision" pointer={pointer}>
           <PerspectiveCamera fov={70} near={0.1} far={80} />
-          <FirstPersonCamera ref={c => (camera = c)} position={[0, EYE, 10]} clampPosition={clamp} />
+          <FirstPersonCamera input={input} ref={c => (camera = c)} position={[0, EYE, 10]} clampPosition={clamp} />
           <HemisphereLight sky={[0.5, 0.56, 0.68]} ground={[0.25, 0.22, 0.18]} />
           <DirectionalLight color={[1, 0.95, 0.85]} intensity={0.9} position={[8, 14, 6]} direction={[-8, -14, -6]} castShadow shadow={{ mapSize: 2048, normalBias: 0.02, cascades: 3, distance: 40 }} />
           <Mesh geometry={plane({ width: FLOOR * 2 + 2, height: FLOOR * 2 + 2 })} material={ground} rotation={[-Math.PI / 2, 0, 0]} layers={1 | COLLIDER} />

package/examples/first-person.tsx

@@ -1,16 +1,17 @@
 // A first-person walk: `<FirstPersonCamera>` driving the scene camera from
-// WASD/arrows and the gamepad sticks, mouse look under pointer lock and
-// drag-to-look without it. Click the scene to lock the pointer (the scene
-// leaf takes focus on the same click, which routes the keys to the
-// control), Escape releases it; on a touch screen a drag looks around and
-// the left stick of a pad walks. Movement runs a frame loop only while a
-// key is held or a stick deflected - a still scene renders nothing new.
+// an input map the app wires - WASD/arrows and the sticks through the
+// standard bindings, the scene leaf's drag to look around on touch, and
+// mouse motion while the pointer is locked. Click the scene to lock the
+// pointer, Escape releases it; the keys reach the map through the window
+// (`input.handlers`), so nothing needs focus. Movement runs a frame loop
+// only while a key is held or a stick deflected - a still scene renders
+// nothing new.
 // `clampPosition` keeps the walker inside the courtyard walls, the whole
 // of the collision an app gets from a camera control. The `pose` debug
 // command reads and sets the pose for headless checks.
-import { createSignal, lockPointer, onFrame, pct, pointerLocked, render } from "@solidrt/core"
+import { createInputMap, createPointerFeed, createSignal, gamepad, keyboard, lockPointer, onFrame, pct, pointerLocked, render } from "@solidrt/core"
 import type { PointerEvent } from "@solidrt/core"
-import { box, cylinder, DirectionalLight, FirstPersonCamera, HemisphereLight, lit, Mesh, PerspectiveCamera, plane, Scene } from "@solidrt/3d"
+import { box, cylinder, DirectionalLight, FirstPersonCamera, firstPersonActions, firstPersonBindings, HemisphereLight, lit, Mesh, PerspectiveCamera, plane, Scene } from "@solidrt/3d"
 import type { FirstPersonCameraHandle, Vec3 } from "@solidrt/3d"
 import { registerDebug } from "srt:dev"
 
@@ -43,6 +44,12 @@ let inside = (p: Vec3): Vec3 => [clampNum(p[0], -COURT + WALL_GAP, COURT - WALL_
 
 function App() {
   let camera!: FirstPersonCameraHandle
+  // The walker's input: the scene leaf's gestures, the keyboard and any
+  // pad, bound to the control's actions (ARCHITECTURE.md: the app wires
+  // devices, the component takes the map).
+  let pointer = createPointerFeed()
+  let input = createInputMap(firstPersonActions)
+  input.bind(firstPersonBindings({ pointer, gamepad: gamepad(), keyboard }))
   let [hud, setHud] = createSignal("")
   let lastHud = 0
   onFrame(tick => {
@@ -77,8 +84,11 @@ function App() {
   return (
     <window
       onKeyDown={e => {
+        input.handlers.onKeyDown(e)
         if (e.key === "Escape") lockPointer(false)
       }}
+      onKeyUp={input.handlers.onKeyUp}
+      onBlur={input.handlers.onBlur}
     >
       <view
         width={pct(100)}
@@ -87,9 +97,9 @@ function App() {
           if (e.pointerType === "mouse") lockPointer(true)
         }}
       >
-        <Scene clearColor={[0.6, 0.72, 0.88, 1]} samples={4} label="first-person">
+        <Scene clearColor={[0.6, 0.72, 0.88, 1]} samples={4} label="first-person" pointer={pointer}>
           <PerspectiveCamera fov={70} near={0.1} far={60} />
-          <FirstPersonCamera ref={c => (camera = c)} position={[0, EYE, 7]} clampPosition={inside} />
+          <FirstPersonCamera input={input} ref={c => (camera = c)} position={[0, EYE, 7]} clampPosition={inside} />
           <HemisphereLight sky={[0.5, 0.56, 0.68]} ground={[0.25, 0.22, 0.18]} />
           <DirectionalLight
             color={[1, 0.95, 0.85]}

package/examples/fleet.tsx

@@ -15,8 +15,8 @@
 // the last tapped instance, how many are flipped) and `pixel` ({ i }: the
 // scene pixel instance i projects to and what a pick there finds, for a
 // synthetic tap).
-import { createSignal, flush, For, pct, render } from "@solidrt/core"
-import { box, DirectionalLight, HemisphereLight, Instance, InstancedMesh, lit, Mesh, OrbitCamera, plane, Scene, worldPosition } from "@solidrt/3d"
+import { createInputMap, createPointerFeed, createSignal, flush, For, gamepad, pct, render } from "@solidrt/core"
+import { box, DirectionalLight, HemisphereLight, Instance, InstancedMesh, lit, Mesh, OrbitCamera, orbitActions, orbitBindings, plane, Scene, worldPosition } from "@solidrt/3d"
 import type { InstanceNode, NodeTransition, SceneHandle, Vec3 } from "@solidrt/3d"
 import { registerDebug } from "srt:dev"
 
@@ -143,12 +143,18 @@ registerDebug("pixel", (args?: Record<string, unknown>) => {
 })
 
 function App() {
+  // The camera's input: the scene leaf's gestures and any pad, bound to the
+  // orbit control's actions - the app wires devices, the component takes
+  // the map (ARCHITECTURE.md).
+  let pointer = createPointerFeed()
+  let input = createInputMap(orbitActions)
+  input.bind(orbitBindings({ pointer, gamepad: gamepad() }))
   let place = (i: number): Vec3 => FORMATIONS[formation()]!.at(i)
   return (
     <window>
       <view width={pct(100)} height={pct(100)}>
-        <Scene clearColor={[SKY[0], SKY[1], SKY[2], 1]} fog={{ color: SKY, near: 12, far: 30 }} label="fleet" ref={s => (scene = s)}>
-          <OrbitCamera target={[0, 2, 0]} distance={15} elevation={0.45} azimuth={0.6} />
+        <Scene clearColor={[SKY[0], SKY[1], SKY[2], 1]} fog={{ color: SKY, near: 12, far: 30 }} label="fleet" ref={s => (scene = s)} pointer={pointer}>
+          <OrbitCamera input={input} target={[0, 2, 0]} distance={15} elevation={0.45} azimuth={0.6} />
           <HemisphereLight sky={[0.45, 0.47, 0.5]} ground={[0.12, 0.13, 0.11]} />
           <DirectionalLight
             color={[1, 0.95, 0.85]}
@@ -179,7 +185,7 @@ function App() {
                   position={place(i)}
                   style={tints[i]![0]()}
                   transition={SPRING}
-                  onPointerDown={() => flip(i)}
+                  onTap={() => flip(i)}
                   ref={node => (nodes[i] = node)}
                 />
               )}

package/examples/model.tsx

@@ -52,10 +52,10 @@ function App() {
   let center: [number, number, number] = [(b[0]! + b[3]!) / 2, (b[1]! + b[4]!) / 2, (b[2]! + b[5]!) / 2]
   let radius = Math.hypot(b[3]! - b[0]!, b[4]! - b[1]!, b[5]! - b[2]!) / 2
 
-  // Parts are named after the glTF nodes: a click hides that part, a
-  // click on the body brings everything back.
+  // Parts are named after the glTF nodes: a tap hides that part, a tap
+  // on the body brings everything back.
   for (let part of model.parts) {
-    part.mesh.onPointerDown = () => {
+    part.mesh.onTap = () => {
       if (part.name === "body") for (let p of model.parts) setVisible(p.mesh, true)
       else setVisible(part.mesh, false)
     }

package/examples/pick.tsx

@@ -1,60 +1,136 @@
-// Mesh pointer events: hover to tint (enter/leave), click to pop (down),
-// with a Group seeing its children's clicks through bubbling and one mesh
-// stopping the walk. The scene is STATIC - no onFrame - so it renders only
-// when an event changes something: picking is demand-driven like
-// everything else. Events flow because the built-in <Scene> leaf carries
-// scene.handlers (default on); hit testing runs over the scene's BVH, so a
-// pointer move costs O(log meshes).
+// Mesh pointer events under an orbit control, the scene as the root of
+// the walk: hover tints (enter/leave), a TAP pops (a down may be the start
+// of an orbit drag, so the pop waits for the release), a drag on the
+// crate slides it over the floor and never orbits - its down claims the
+// press, so the orbit control's feed, listening at the root, sees none
+// of it - while a drag anywhere else orbits and a wheel zooms; the ring
+// claims the wheel to spin itself; a tap on empty space un-pops
+// everything (the scene's own onTap with `mesh` null, the deselect
+// idiom). The Group hears the cone's downs through bubbling (the crate's
+// claim stops the walk at the crate). The scene is STATIC - no onFrame - so it renders only when an event changes
+// something, and the orbit runs frames only while it glides; hit testing
+// runs over the scene's BVH, so a pointer move costs O(log meshes).
 //
 // The volume tier is honest about its shape: hits test each mesh's
 // bounding box, so hovering just outside the ball's silhouette (inside its
 // box corners) still counts. Triangle-accurate hits are a later tier.
+//
+// Debug commands: `state` (the orbit pose, the crate's position, the
+// ring's spin, the popped and hovered names) and `pixel` ({ name }: the
+// WINDOW pixel a mesh's position projects to, for a synthetic tap).
 
-import { createSignal, pct, render } from "@solidrt/core"
-import { box, cone, Group, Mesh, PerspectiveCamera, plane, Scene, setMeshParams, setTransform, sphere, torus, unlit } from "@solidrt/3d"
-import type { Geometry, ScenePointerEvent, Vec3 } from "@solidrt/3d"
+import { createInputMap, createPointerFeed, createSignal, displayScale, pct, render } from "@solidrt/core"
+import { box, cone, getRotation, Group, Mesh, OrbitCamera, orbitActions, orbitBindings, PerspectiveCamera, plane, Scene, setMeshParams, setTransform, sphere, torus, unlit, useScene } from "@solidrt/3d"
+import type { Geometry, MeshNode, NodePointerEvent, NodeTapEvent, NodeWheelEvent, OrbitCameraHandle, SceneHandle, Vec3 } from "@solidrt/3d"
+import { registerDebug } from "srt:dev"
 
 type Color = [number, number, number]
 
+// How much a popped mesh grows.
+const POP_SCALE = 1.25
+// Radians of ring spin per wheel pixel.
+const WHEEL_SPIN = 0.01
+// The orbit's starting pose: the old fixed camera at [0, 2.6, 5] looking
+// at the scene's middle.
+const ORBIT_TARGET: Vec3 = [0, 0.4, 0]
+const ORBIT_DISTANCE = 5.5
+const ORBIT_ELEVATION = 0.42
+
 let [hovered, setHovered] = createSignal("nothing")
-let popped = new Set<object>()
+// Popped meshes and the scale they pop back to.
+let popped = new Map<MeshNode, number>()
+let meshes: Record<string, MeshNode> = {}
+let orbit!: OrbitCameraHandle
+let scene!: SceneHandle
+
+let unpopAll = () => {
+  for (let [mesh, base] of popped) setTransform(mesh, { scale: base })
+  popped.clear()
+}
 
 /** A pickable mesh: unlit color that brightens on hover, scale-pop on
- * click. setMeshParams writes raw uniform values, so the tint premultiplies
- * here (alpha 1: the rgb passes through). */
-function Pickable(p: { name: string; color: Color; geometry: Geometry; position: Vec3; scale?: number; stop?: boolean }) {
+ * tap; `drag` slides it over the floor (claiming the press), `spin`
+ * turns it on the wheel (claiming the wheel). setMeshParams writes raw
+ * uniform values, so the tint premultiplies here (alpha 1: the rgb passes
+ * through). */
+function Pickable(p: { name: string; color: Color; geometry: Geometry; position: Vec3; scale?: number; drag?: boolean; spin?: boolean }) {
+  let scene = useScene().scene
   let lift = (up: number): [number, number, number, number] => [
     Math.min(p.color[0] + up, 1),
     Math.min(p.color[1] + up, 1),
     Math.min(p.color[2] + up, 1),
     1,
   ]
+  // The floor point under the pointer at the mesh's height: the camera
+  // ray through the event's scene pixel meets the plane y = mesh y.
+  let floorPoint = (e: NodePointerEvent): [number, number] | null => {
+    let ray = scene.screenRay(e.x, e.y)
+    if (Math.abs(ray.direction[1]) < 1e-6) return null
+    let t = (e.mesh.position[1] - ray.origin[1]) / ray.direction[1]
+    if (t < 0) return null
+    return [ray.origin[0] + t * ray.direction[0], ray.origin[2] + t * ray.direction[2]]
+  }
+  // The mesh's offset from the grabbed floor point while a drag is on.
+  let grab: [number, number] | null = null
+  let spin = 0
   return (
     <Mesh
       geometry={p.geometry}
       material={unlit({ color: p.color })}
       position={p.position}
       scale={p.scale}
-      onPointerEnter={(e: ScenePointerEvent) => {
+      ref={m => (meshes[p.name] = m)}
+      onPointerEnter={(e: NodePointerEvent) => {
         setHovered(p.name)
         setMeshParams(e.mesh, { uColor: lift(0.25) })
-        console.log(`enter ${p.name}`)
       }}
-      onPointerLeave={(e: ScenePointerEvent) => {
+      onPointerLeave={(e: NodePointerEvent) => {
         setHovered("nothing")
         setMeshParams(e.mesh, { uColor: lift(0) })
-        console.log(`leave ${p.name}`)
       }}
-      onPointerDown={(e: ScenePointerEvent) => {
-        let pop = !popped.has(e.mesh)
-        if (pop) popped.add(e.mesh)
-        else popped.delete(e.mesh)
-        setTransform(e.mesh, { scale: pop ? (p.scale ?? 1) * 1.25 : (p.scale ?? 1) })
+      onTap={(e: NodeTapEvent) => {
+        let base = popped.get(e.mesh)
+        if (base === undefined) {
+          popped.set(e.mesh, p.scale ?? 1)
+          setTransform(e.mesh, { scale: (p.scale ?? 1) * POP_SCALE })
+        } else {
+          popped.delete(e.mesh)
+          setTransform(e.mesh, { scale: base })
+        }
         let pt = e.point!
-        console.log(`down ${p.name} at ${pt[0].toFixed(2)},${pt[1].toFixed(2)},${pt[2].toFixed(2)} d=${e.distance!.toFixed(2)}`)
-        // The cone demonstrates stopping the bubble: its group never hears it.
-        if (p.stop) e.stopPropagation()
+        console.log(`tap ${p.name} x${e.tapCount} at ${pt[0].toFixed(2)},${pt[1].toFixed(2)},${pt[2].toFixed(2)} d=${e.distance!.toFixed(2)}`)
       }}
+      onPointerDown={
+        p.drag
+          ? (e: NodePointerEvent) => {
+              let f = floorPoint(e)
+              if (f === null) return
+              grab = [e.mesh.position[0] - f[0], e.mesh.position[2] - f[1]]
+              // The claim: this press is the crate's, the orbit never sees it.
+              e.stopPropagation()
+            }
+          : undefined
+      }
+      onPointerMove={
+        p.drag
+          ? (e: NodePointerEvent) => {
+              if (grab === null) return
+              let f = floorPoint(e)
+              if (f === null) return
+              setTransform(e.mesh, { position: [f[0] + grab[0], e.mesh.position[1], f[1] + grab[1]] })
+            }
+          : undefined
+      }
+      onPointerUp={p.drag ? () => (grab = null) : undefined}
+      onWheel={
+        p.spin
+          ? (e: NodeWheelEvent) => {
+              spin += e.deltaY * WHEEL_SPIN
+              setTransform(e.mesh, { rotation: [0, spin, 0] })
+              e.stopPropagation()
+            }
+          : undefined
+      }
     />
   )
 }
@@ -65,27 +141,61 @@ function App() {
   let ball = sphere({ radius: 0.45 })
   let spike = cone({ radius: 0.45, height: 1 })
   let ring = torus({ radius: 0.4, tube: 0.14 })
+  // The orbit control's input: the scene leaf's pointer feed, bound to
+  // the standard orbit actions (drag rotates, wheel and pinch zoom).
+  let pointer = createPointerFeed()
+  let input = createInputMap(orbitActions)
+  input.bind(orbitBindings({ pointer }))
+
+  registerDebug("state", () => ({
+    pose: orbit.pose(),
+    crate: meshes.crate?.position,
+    ringSpin: meshes.ring ? getRotation(meshes.ring)[1] : null,
+    popped: Object.keys(meshes).filter(n => popped.has(meshes[n]!)),
+    hovered: hovered(),
+  }))
+  // The scene fills the window at device density, so a scene pixel over
+  // the display scale is a window pixel.
+  registerDebug("pixel", (args?: { name?: string }) => {
+    let mesh = meshes[args?.name ?? ""]
+    if (!mesh) return null
+    let p = scene.project(mesh.position)
+    if (p === null) return null
+    return { x: p.x / displayScale(), y: p.y / displayScale() }
+  })
 
   return (
     <window>
       <view width={pct(100)} height={pct(100)}>
-        <Scene clearColor={[0.07, 0.07, 0.1, 1]} label="pick">
-          <PerspectiveCamera fov={55} position={[0, 2.6, 5]} lookAt={[0, 0.4, 0]} />
+        <Scene
+          clearColor={[0.07, 0.07, 0.1, 1]}
+          label="pick"
+          pointer={pointer}
+          ref={s => (scene = s)}
+          onTap={e => {
+            if (e.mesh !== null) return
+            console.log(`tap on nothing at ${e.x.toFixed(0)},${e.y.toFixed(0)}: un-pop`)
+            unpopAll()
+          }}
+        >
+          <PerspectiveCamera fov={55} />
+          <OrbitCamera input={input} target={ORBIT_TARGET} distance={ORBIT_DISTANCE} elevation={ORBIT_ELEVATION} ref={o => (orbit = o)} />
           <Mesh geometry={floor} material={unlit({ color: [0.15, 0.16, 0.2] })} rotation={[-Math.PI / 2, 0, 0]} />
-          {/* The group hears every child click that is not stopped. */}
-          <Group onPointerDown={() => console.log("group saw down")}>
-            <Pickable name="crate" color={[0.85, 0.3, 0.3]} geometry={crate} position={[-1.6, 0.4, 0]} scale={0.8} />
-            <Pickable name="cone" color={[0.35, 0.65, 0.9]} geometry={spike} position={[1.6, 0.5, 0]} stop />
+          {/* The group hears the cone's downs through bubbling; the crate's
+              claim stops the walk at the crate, so the group never sees those. */}
+          <Group onPointerDown={e => console.log(`group saw down on ${e.mesh === meshes.crate ? "crate" : "cone"}`)}>
+            <Pickable name="crate" color={[0.85, 0.3, 0.3]} geometry={crate} position={[-1.6, 0.4, 0]} scale={0.8} drag />
+            <Pickable name="cone" color={[0.35, 0.65, 0.9]} geometry={spike} position={[1.6, 0.5, 0]} />
           </Group>
           <Pickable name="ball" color={[0.9, 0.8, 0.35]} geometry={ball} position={[0, 0.45, 0]} />
-          <Pickable name="ring" color={[0.5, 0.85, 0.5]} geometry={ring} position={[0.9, 0.35, -1.6]} />
+          <Pickable name="ring" color={[0.5, 0.85, 0.5]} geometry={ring} position={[0.9, 0.35, -1.6]} spin />
         </Scene>
         <view position="absolute" x={0} y={0} padding={16} gap={4}>
           <text color="#eef4ff" fontSize={22} fontWeight={700}>
             {`hover: ${hovered()}`}
           </text>
           <text color="#8fa6c8" fontSize={13}>
-            hover tints, click pops - a static scene, rendered only on change
+            hover tints, tap pops, drag the crate; drag elsewhere orbits, wheel zooms (over the ring: spins it), tap nothing to un-pop
           </text>
         </view>
       </view>

package/examples/probe.tsx

@@ -12,8 +12,8 @@
 // (the chain is the frame's largest GPU item; see AGENTS.md). Drag to
 // look around.
 
-import { createSignal, onFrame, pct, render } from "@solidrt/core"
-import { DirectionalLight, HemisphereLight, Mesh, OrbitCamera, plane, Scene, sphere, standard, unlit } from "@solidrt/3d"
+import { createInputMap, createPointerFeed, createSignal, gamepad, onFrame, pct, render } from "@solidrt/core"
+import { DirectionalLight, HemisphereLight, Mesh, OrbitCamera, orbitActions, orbitBindings, plane, Scene, sphere, standard, unlit } from "@solidrt/3d"
 import type { ReflectionProbe, SceneHandle } from "@solidrt/3d"
 import type { Vec3 } from "@solidrt/3d/math"
 
@@ -58,6 +58,12 @@ const ORBITER_COLORS: [number, number, number][] = [
 ]
 
 function App() {
+  // The camera's input: the scene leaf's gestures and any pad, bound to the
+  // orbit control's actions - the app wires devices, the component takes
+  // the map (ARCHITECTURE.md).
+  let pointer = createPointerFeed()
+  let input = createInputMap(orbitActions)
+  input.bind(orbitBindings({ pointer, gamepad: gamepad() }))
   let [t, setT] = createSignal(0)
   let scene: SceneHandle | undefined
   let probe: ReflectionProbe | undefined
@@ -81,8 +87,8 @@ function App() {
   return (
     <window>
       <view width={pct(100)} height={pct(100)}>
-        <Scene clearColor={[0.05, 0.05, 0.06, 1]} samples={4} label="probe-demo" ref={s => (scene = s)}>
-          <OrbitCamera target={[0, 0, 0]} azimuth={0.5} elevation={0.2} distance={4} />
+        <Scene clearColor={[0.05, 0.05, 0.06, 1]} samples={4} label="probe-demo" ref={s => (scene = s)} pointer={pointer}>
+          <OrbitCamera input={input} target={[0, 0, 0]} azimuth={0.5} elevation={0.2} distance={4} />
           <HemisphereLight sky={[0.6, 0.65, 0.7]} ground={[0.3, 0.28, 0.26]} intensity={0.6} />
           <DirectionalLight direction={[0.4, -0.8, 0.3]} intensity={0.8} />
           {WALLS.map((w, i) => (