1 viewer
Back to Components
Component · Visualization

Camera

Semantic view-intent hint for a Scene (mode + focus target); position and animation are renderer-owned.

Category
Visualization
Slots
1
States
0
Writer
Legacy
cre8.primitive.camera

Preview

Live renderLegacy writer: Scene, Camera, Heightfield, Series3D, Node3D, HyperEdge3D

Isometric Scene with Topology & Surface

Isometric Scene with Topology & Surface Depth by Time × Bucket 4
t0 · low · value 1t0 · mid · value 2t1 · low · value 2t0 · high · value 3t1 · mid · value 3t1 · high · value 4edge_consensus · consensus (3 members): node_alpha, node_center, node_betaAlpha Node · peer · weight 1Alpha NodeConsensus Core · crystal · weight 2.2Consensus CoreBeta Node · peer · weight 1.2Beta NodeDepth by Time × Bucket
<Scene
  height={300}
  projection="isometric"
  title="Isometric Scene with Topology & Surface"
>
  <Camera focus="node_center" mode="orbit" />
  <Heightfield
    id="grid"
    scrollAxis="x"
    window={4}
    xAxis={{ label: "Time", semantic: "time" }}
    yAxis={{ label: "Depth", semantic: "value" }}
    zAxis={{ label: "Bucket", semantic: "bucket" }}
  >
    <Series3D
      buckets={["low", "mid", "high"]}
      columns={[[0, [1.0, 2.0, 3.0]], [1, [2.0, 3.0, 4.0]]]}
      id="s"
      label="Depth"
      window={4}
    />
  </Heightfield>
  <Node3D id="node_alpha" kind="peer" label="Alpha Node" weight={1.0} />
  <Node3D
    id="node_center"
    kind="crystal"
    label="Consensus Core"
    weight={2.2}
  />
  <Node3D id="node_beta" kind="peer" label="Beta Node" weight={1.2} />
  <HyperEdge3D
    id="edge_consensus"
    kind="consensus"
    members={["node_alpha", "node_center", "node_beta"]}
    weight={2.0}
  />
</Scene>

Variants

States and intents
Orbit: 45° PitchZoom: 1.0xFov: 46°Lighting: 3-Point Ambient
3D Camera viewport parameters hydrated into Three.js OrbitControls.

Anatomy

The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.

SlotDOM class
root—
1 row

States and platforms

The states the contract publishes, the platforms it declares, and the style recipes that dress it.

States
No published states
Platforms
native
Recipes
unstyledruntime-console

Renderers

Legacy writer
Camera has no shared writer yet: the server renders it through its legacy path, which the WASM DOM does not share.

The example above still needs shared writers for: Scene, Camera, Heightfield, Series3D, Node3D, HyperEdge3D.

Declared adapters. A status is the manifest's declaration, not a measured parity result.

TargetRendererStatus
nativenative-adapterexperimental
1 row

Accessibility

Semantic structure must stay available without visual styling.

  • Expose meaningful names for interactive controls.
  • Keep keyboard and pointer behavior equivalent where the platform supports it.
  • Publish state with native semantics and data attributes where the adapter supports them.