EXAMPLE / POINTER + KEYBOARDGN / 04

Spatial Collection

Eight synthetic objects, one semantic collection, and one selected value shared by DOM controls and a Three.js scene.

Selection is the registration point.

The homepage example connects primitive anatomy, source code, semantic controls, and rendered output to the same active item.

OUTPUT / SELECTEDCalibration Assembly

OBJECT 01 / 08 · VALUE specimen-01

RUN WEBGL SCENE

The scene consumes state.

The rendered object never becomes the authoritative selection. Pointer events request a value change; the root publishes the result back to every consumer.

<Spatial.Root items={objects} value={selected}>
  <Spatial.Scene>{(snapshot) => <Scene value={snapshot.value} />}</Spatial.Scene>
  <Spatial.Collection aria-label="Demo objects">
    {objects.map((object) => (
      <Spatial.Item key={object.id} value={object.id} />
    ))}
  </Spatial.Collection>
</Spatial.Root>

Every input reaches the same result.

Drag or wheel the scene, click an object, use Previous and Next, or focus the collection and press an arrow key. The status, inspector, code highlight, and scene remain synchronized.