@solidrt/3d 0.0.56 → 0.0.57

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) => (

package/examples/scene-views.tsx

@@ -1,20 +1,21 @@
 // One scene, three renderings: the built-in leaf from a perspective
-// camera, plus two `scene.createView` targets - a top-down ORTHOGRAPHIC
-// map (`ortho` on setCamera) and a side silhouette drawn with an
+// camera, plus two `<View3d>`s - a top-down ORTHOGRAPHIC map (`ortho` in
+// the view's `camera`) and a side silhouette drawn with an
 // `overrideMaterial`. The group spins from ONE signal: each mesh is one
 // core node whose flush writes its world matrix into every target's entry
 // at once, so the extra views cost the app nothing per frame (and the
 // light set fans out to them too - the map is lit like the main view).
-// Views die with the scene.
+// A view is a Scene child: it renders its own `<texture>` leaf where it
+// sits, so the two stack in the column beside the scene's leaf, and it
+// dies with the scene.
 //
 // Layers and per-view fog: the marker disc is on layer bit 2, so the
 // main render (mask 1) and the silhouette never draw it - only the map,
-// whose mask admits both bits. The scene is fogged; `fog: null` on the
+// whose mask admits both bits. The scene is fogged; `fog={null}` on the
 // map keeps the top-down view clear (its fog names are view-owned, so
 // scene-wide fog writes never clobber them).
 import { createSignal, onFrame, pct, render } from "@solidrt/core"
-import { box, circle, DirectionalLight, Group, HemisphereLight, lit, Mesh, PerspectiveCamera, plane, Scene, sphere, unlit } from "@solidrt/3d"
-import type { SceneHandle } from "@solidrt/3d"
+import { box, circle, DirectionalLight, Group, HemisphereLight, lit, Mesh, PerspectiveCamera, plane, Scene, sphere, unlit, View3d } from "@solidrt/3d"
 
 // Layer bits: the world everything defaults to, and the map-only markers.
 const WORLD_LAYER = 1
@@ -31,67 +32,16 @@ function App() {
   let floor = plane({ width: 6, height: 6, label: "floor" })
   let ball = sphere({ radius: 0.35 })
   let marker = circle({ radius: 0.3, label: "marker" })
-  // `ref` runs before `output`, so the handle is set when the views are
-  // created there; both callbacks run once, untracked - no signals needed.
-  let scene!: SceneHandle
 
   return (
     <window>
-      <view width={pct(100)} height={pct(100)} designSize={[MAIN + SIDE, MAIN]}>
+      <view width={pct(100)} height={pct(100)} designSize={[MAIN + SIDE, MAIN]} flexDirection="row">
         <Scene
           width={MAIN}
           height={MAIN}
           clearColor={[0.07, 0.07, 0.1, 1]}
           fog={{ color: [0.07, 0.07, 0.1], near: 2.5, far: 9 }}
           label="scene-views"
-          ref={s => (scene = s)}
-          output={tex => {
-            // The map: straight down from y = 10, world -z toward the top of
-            // the leaf, seven world units across at any depth. Its mask also
-            // admits the marker layer, and `fog: null` keeps it clear while
-            // the main view fades to the horizon.
-            let map = scene.createView({
-              width: SIDE,
-              height: SIDE,
-              clearColor: [0.05, 0.08, 0.06, 1],
-              layers: WORLD_LAYER | MARKER_LAYER,
-              fog: null,
-              label: "map",
-            })
-            map.setCamera({
-              position: [0, 10, 0],
-              target: [0, 0, 0],
-              up: [0, 0, -1],
-              ortho: { left: -3.5, right: 3.5, top: 3.5, bottom: -3.5 },
-              near: 0.1,
-              far: 20,
-            })
-            // The silhouette: every mesh drawn flat amber, from the side. The
-            // floor is edge-on here, a single line at the bottom.
-            let side = scene.createView({
-              width: SIDE,
-              height: SIDE,
-              clearColor: [0.1, 0.06, 0.05, 1],
-              overrideMaterial: unlit({ color: [0.95, 0.75, 0.3] }),
-              label: "silhouette",
-            })
-            side.setCamera({
-              position: [6, 1, 0],
-              target: [0, 0.6, 0],
-              ortho: { left: -2.4, right: 2.4, top: 2.4, bottom: -2.4 },
-              near: 0.1,
-              far: 20,
-            })
-            return (
-              <view flexDirection="row" width={MAIN + SIDE} height={MAIN}>
-                <texture src={tex} width={MAIN} height={MAIN} />
-                <view flexDirection="column" width={SIDE} height={MAIN}>
-                  <texture src={map.texture} width={SIDE} height={SIDE} />
-                  <texture src={side.texture} width={SIDE} height={SIDE} />
-                </view>
-              </view>
-            )
-          }}
         >
           <PerspectiveCamera fov={55} position={[0, 1.6, 3.6]} lookAt={[0, 0.3, 0]} />
           <HemisphereLight sky={[0.6, 0.7, 0.9]} ground={[0.25, 0.2, 0.15]} intensity={0.6} />
@@ -115,6 +65,47 @@ function App() {
               rotation={[-Math.PI / 2, 0, 0]}
             />
           </Group>
+          {/* The two views' leaves stack beside the scene's: a laid-out
+              element among Scene children renders where it sits, and the
+              views inside it stay Scene children through context. */}
+          <view flexDirection="column" width={SIDE} height={MAIN}>
+            {/* The map: straight down from y = 10, world -z toward the top
+                of the leaf, seven world units across at any depth. Its mask
+                also admits the marker layer, and `fog={null}` keeps it clear
+                while the main view fades to the horizon. */}
+            <View3d
+              width={SIDE}
+              height={SIDE}
+              clearColor={[0.05, 0.08, 0.06, 1]}
+              layers={WORLD_LAYER | MARKER_LAYER}
+              fog={null}
+              label="map"
+              camera={{
+                position: [0, 10, 0],
+                target: [0, 0, 0],
+                up: [0, 0, -1],
+                ortho: { left: -3.5, right: 3.5, top: 3.5, bottom: -3.5 },
+                near: 0.1,
+                far: 20,
+              }}
+            />
+            {/* The silhouette: every mesh drawn flat amber, from the side.
+                The floor is edge-on here, a single line at the bottom. */}
+            <View3d
+              width={SIDE}
+              height={SIDE}
+              clearColor={[0.1, 0.06, 0.05, 1]}
+              overrideMaterial={unlit({ color: [0.95, 0.75, 0.3] })}
+              label="silhouette"
+              camera={{
+                position: [6, 1, 0],
+                target: [0, 0.6, 0],
+                ortho: { left: -2.4, right: 2.4, top: 2.4, bottom: -2.4 },
+                near: 0.1,
+                far: 20,
+              }}
+            />
+          </view>
         </Scene>
       </view>
     </window>

package/examples/sky-lit.tsx

@@ -9,9 +9,9 @@
 // gradient. The sky is a scene param (uSunDir), so the bake sees the same
 // sun the backdrop draws. Drag to look around.
 
-import { pct, render } from "@solidrt/core"
+import { createInputMap, createPointerFeed, gamepad, pct, render } from "@solidrt/core"
 import { glsl } from "@solidrt/core/gpu"
-import { Mesh, OrbitCamera, Scene, sphere, standard } from "@solidrt/3d"
+import { Mesh, OrbitCamera, orbitActions, orbitBindings, Scene, sphere, standard } from "@solidrt/3d"
 import type { SceneHandle } from "@solidrt/3d"
 import { normalize } from "@solidrt/3d/math"
 import type { Vec3 } from "@solidrt/3d/math"
@@ -55,6 +55,12 @@ const SKY = glsl`
 `
 
 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 spheres: { position: Vec3; material: ReturnType<typeof standard> }[] = []
   for (let i = 0; i < COUNT; i++) {
     let roughness = i / (COUNT - 1)
@@ -72,8 +78,8 @@ function App() {
   return (
     <window>
       <view width={pct(100)} height={pct(100)}>
-        <Scene background={SKY} toneMapping="aces" samples={4} label="sky-lit" ref={lit}>
-          <OrbitCamera target={[0, 0, 0]} azimuth={0.3} elevation={0.15} distance={7} />
+        <Scene background={SKY} toneMapping="aces" samples={4} label="sky-lit" ref={lit} pointer={pointer}>
+          <OrbitCamera input={input} target={[0, 0, 0]} azimuth={0.3} elevation={0.15} distance={7} />
           {spheres.map(s => (
             <Mesh geometry={geometry} material={s.material} position={s.position} />
           ))}

package/examples/skybox.tsx

@@ -11,9 +11,9 @@
 // equirectToCube on a panorama. The sky turns slowly and the sun light
 // turns with it: `rotation` is a reactive prop the scene updates in
 // place, no recompile. Drag to look around, wheel to zoom.
-import { createSignal, onFrame, pct, render } from "@solidrt/core"
+import { createInputMap, createPointerFeed, createSignal, gamepad, onFrame, pct, render } from "@solidrt/core"
 import { createCubeTexture } from "@solidrt/core/gpu"
-import { box, DirectionalLight, HemisphereLight, lit, Mesh, OrbitCamera, plane, Scene, sphere, torusKnot } from "@solidrt/3d"
+import { box, DirectionalLight, HemisphereLight, lit, Mesh, OrbitCamera, orbitActions, orbitBindings, plane, Scene, sphere, torusKnot } from "@solidrt/3d"
 import { normalize } from "@solidrt/3d/math"
 import type { Vec3 } from "@solidrt/3d/math"
 
@@ -92,6 +92,12 @@ function turnedSun(angle: number): Vec3 {
 }
 
 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 cube = createCubeTexture(bakeSky(), FACE, { format: "rgba8-srgb", mipmap: true, label: "sky" })
   let [turn, setTurn] = createSignal(0)
   let last = 0
@@ -111,8 +117,8 @@ function App() {
   return (
     <window>
       <view width={pct(100)} height={pct(100)}>
-        <Scene background={{ cube, rotation: turn() }} environment={{ cube, rotation: turn() }} label="skybox-demo">
-          <OrbitCamera azimuth={0.4} elevation={0.12} distance={7} />
+        <Scene background={{ cube, rotation: turn() }} environment={{ cube, rotation: turn() }} label="skybox-demo" pointer={pointer}>
+          <OrbitCamera input={input} azimuth={0.4} elevation={0.12} distance={7} />
           <HemisphereLight sky={[0.5, 0.6, 0.8]} ground={[0.3, 0.27, 0.24]} />
           <DirectionalLight direction={[-sun()[0], -sun()[1], -sun()[2]]} color={SUN_COLOR} intensity={0.9} />
           <Mesh geometry={plane({ width: 12, height: 12 })} material={ground} rotation={[-Math.PI / 2, 0, 0]} />

package/examples/standard.tsx

@@ -12,9 +12,9 @@
 // Light intensities read as lit's: 1 lights a white matte surface to 1.
 // Drag to look around.
 
-import { pct, render } from "@solidrt/core"
+import { createInputMap, createPointerFeed, gamepad, pct, render } from "@solidrt/core"
 import { createCubeTexture } from "@solidrt/core/gpu"
-import { DirectionalLight, HemisphereLight, Mesh, OrbitCamera, plane, Scene, sphere, standard } from "@solidrt/3d"
+import { DirectionalLight, HemisphereLight, Mesh, OrbitCamera, orbitActions, orbitBindings, plane, Scene, sphere, standard } from "@solidrt/3d"
 import { normalize } from "@solidrt/3d/math"
 import type { Vec3 } from "@solidrt/3d/math"
 
@@ -91,6 +91,12 @@ function bakeSky(): Uint8Array[] {
 }
 
 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 cube = createCubeTexture(bakeSky(), FACE, { format: "rgba8-srgb", mipmap: true, label: "sky" })
   let ball = sphere({ radius: RADIUS, widthSegments: 48, heightSegments: 32 })
   let ground = standard({ color: [0.32, 0.33, 0.3], roughness: 0.9 })
@@ -109,8 +115,8 @@ function App() {
   return (
     <window>
       <view width={pct(100)} height={pct(100)}>
-        <Scene background={{ cube }} environment={{ cube }} samples={4} label="standard-demo">
-          <OrbitCamera target={center} azimuth={0.25} elevation={0.15} distance={9} />
+        <Scene background={{ cube }} environment={{ cube }} samples={4} label="standard-demo" pointer={pointer}>
+          <OrbitCamera input={input} target={center} azimuth={0.25} elevation={0.15} distance={9} />
           <HemisphereLight sky={[0.5, 0.6, 0.8]} ground={[0.3, 0.27, 0.24]} intensity={0.5} />
           <DirectionalLight
             position={[SUN[0] * SUN_DISTANCE, SUN[1] * SUN_DISTANCE, SUN[2] * SUN_DISTANCE]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/3d",
-  "version": "0.0.56",
+  "version": "0.0.57",
   "license": "MIT",
   "funding": "https://github.com/sponsors/wellawaretech",
   "author": "Antoine van Wel",
@@ -19,6 +19,6 @@
   ],
   "peerDependencies": {
     "@solidjs/signals": "2.0.0-rc.6",
-    "@solidrt/core": "0.0.56"
+    "@solidrt/core": "0.0.57"
   }
 }