1 viewer
Back to Components
Component · Visualization

Scene

Root of a 3D data-surface subtree: camera hint, heightfield surfaces, point-event markers.

Category
Visualization
Slots
3
States
0
Writer
Legacy
cre8.primitive.scene

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.primitive-scene
title.primitive-scene__title
description.primitive-scene__description
3 rows

States and platforms

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

States
No published states
Platforms
webnative
Recipes
unstyledruntime-console

Renderers

Legacy writer
Scene 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
webreactexperimental
nativenative-adapterexperimental
2 rows

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.