# threejs-scenes
A Claude skill for building production-quality **three.js** WebGL scenes with
vanilla three.js (WebGL2) — no React-Three-Fiber, no Drei, no WebGPU. Just
`three` from its main entry point, authored to ship as a single self-contained
HTML artifact that runs in a sandboxed iframe with no build step.
## download
- **Skill package:** [`threejs-scenes.skill`](https://tuomashatakka.github.io/threejs-scenes-skill/threejs-scenes.skill)
— build one locally with `bun run package:skill` (validates `SKILL.md`, refreshes the bundled lib, zips `skill/`)
— the packaged `skill/` directory. Drop it into `~/.claude/skills/` (or
`~/.config/opencode/skills/`) and unzip, or install it via Claude Code.
- **Live showcase:** [tuomashatakka.github.io/threejs-scenes-skill](https://tuomashatakka.github.io/threejs-scenes-skill/)
— semantic gallery of the runnable demos plus the full API reference.
Both are published automatically by the **Publish showcase & skill** GitHub
Actions workflow (`.github/workflows/publish.yml`) on every push to `main`.
## what it does
When a request touches three.js / WebGL / 3D-in-the-browser, this skill gives
the agent a curated body of reference docs, copy-ready script modules, and
runnable HTML templates so it can build correct, performant scenes instead of
re-deriving boilerplate every time.
It covers, end to end:
- **scene scaffolding** — renderer factory (DPR-capped, ACES, sRGB), a single
Clock-driven frame loop, `ResizeObserver`-based resize, explicit disposal.
- **camera handling** — perspective orbit, third-person follow, isometric
orthographic; touch-first unified pointer gestures (mouse/touch/pen identical).
- **instancing & draw-call reduction** — `InstancedMesh` and `BatchedMesh` to
render thousands of objects in one draw call.
- **procedural generation** — seeded `mulberry32` RNG, value/simplex noise,
Poisson-disk placement, runtime geometry/texture factories.
- **shaders** — custom `ShaderMaterial` / GLSL (fresnel, scanlines, noise).
- **post-processing** — `EffectComposer` chains: bloom, colour grade, god rays,
depth-of-field + chromatic aberration, film grain, glitch, HUD beams, stereoscopy.
- **voxels & infinite worlds** — chunked storage, greedy meshing, origin rebasing.
- **lighting** — IBL environment + sun (tuned shadow frustum) + hemisphere fill.
- **LLM-driven content** — ai-sdk / Gemini tool schemas for generating scenes
from text prompts, with validate-and-repair codegen flow.
## core principles
- **vanilla three.js only** — portable, artifact-friendly, no framework lock-in.
- **touch-first** — `pointer*` events exclusively, `touch-action: none` on the
canvas, pixel ratio capped at 2.
- **one writer per concern** — a single camera writer (no double-lerp jitter),
one frame loop, one composer.
- **dispose what you own** — three.js never auto-frees GPU memory; pooled/shared
materials are never disposed (see `references/production-lessons.md`).
- **determinism** — seeded factories so a scene is pixel-identical across reloads.
- **draw-call discipline** — instance before you add a second mesh.
## package
This repo is **also** an importable, strictly-typed npm package that codifies
every skill pattern (and the production lessons from a shipping `scene/`
project) as well-typed factories and interfaces. Build it with `bun run build`
(emits `dist/` with `.d.ts` files); `three` is a **peer dependency**.
The root barrel is **curated**: a hand-picked set of the most-used factories at
the top level, plus the full library grouped into six domain namespaces
(`core`, `primitives`, `raster`, `compose`, `state`, `scaffold`). Every namespace
is also a tree-shakeable subpath.
```ts
import {
// curated "hero" factories — the fast path to a running scene
createApp, bootstrapScene, createRenderer, createFrameLoop,
createStandardMaterial, createEmitter, createInfiniteGround,
// domain namespaces — the whole library, grouped by concern
core, primitives, raster, compose, state, scaffold,
} from 'threejs-scenes'
const app = createApp({ canvas }) // renderer + scene + camera + lighting + orbit + loop
const chunk = new primitives.VoxelChunk(16) // deep API lives in its namespace
app.start()
// or import a single domain directly (best for tree-shaking):
import { createBatchedBuildings } from 'threejs-scenes/primitives'
import { createComposer, createGradePass } from 'threejs-scenes/raster'
```
Public entry points:
- `threejs-scenes` — curated root: hero factories + the six domain namespaces
- `threejs-scenes/core` — renderer, frame loop (incl. worker updates), clocks, store, createApp, input, projection, disposal, quality
- `threejs-scenes/primitives` — geometry, materials, procedural, instancing, voxels
- `threejs-scenes/raster` — lighting, cameras, post-processing, particles
- `threejs-scenes/compose` — scene modules, props, loaders, animation, skybox, events
- `threejs-scenes/state` — controller protocol, tween/lerp transitions (store lives in `/core`)
- `threejs-scenes/scaffold` — one-call genre wiring (iso, orbit, tpp, rails, fps)
- `threejs-scenes/webgpu` — dedicated WebGPU post-processing and TSL effects
- `threejs-scenes/jsx` — declarative, reactive JSX layer
- `threejs-scenes/lib/*` — raw, uncompiled TypeScript source (bundler-resolved; mirrors `dist/*` 1:1)
### hooks (`/jsx`)
The `threejs-scenes/jsx` subpath exposes the library's main interfaces as
**hooks** (no React required). Inside a JSX function component the reconciler
provides the mounting runtime, so `useScene()`, `useRenderer()`, `useCamera()`,
`useLoop()`, `useRng()`, `useSize()`, `useAspect()`, `useFrame(cb)` and
`useDispose(fn)` just work; `useFrameLoop(cb?, { fps })` and
`useSignal` / `useDerived` are callable anywhere.
```tsx
import { render, h, useFrame, useSignal } from 'threejs-scenes/jsx'
function Spinner () {
const [angle, setAngle] = useSignal(0)
useFrame(({ delta }) => setAngle(a => a + delta))
return
}
render(, { canvas })
```
### API reference
Generated from the built `.d.ts` files by `bun run docs`.
The vite site renders the full searchable API with runnable playgrounds at
[the library page](https://tuomashatakka.github.io/threejs-scenes-skill/library/) and keeps the old
[`api.html`](https://tuomashatakka.github.io/threejs-scenes-skill/api.html) URL as a redirect.
#### `threejs-scenes`
A deliberately small surface: the shared type vocabulary, a hand-picked set of the most-used factories (createApp, the scaffolds, the go-to material/geometry/light/animation/prop/particle helpers), and the six domain namespaces below. The full library is grouped by concern behind core / primitives / raster / compose / state / scaffold.
- **`applyTaper`** *(function)* — Taper: the two axes perpendicular to `axis` scale from 1 to `factor` along it.
```ts
function applyTaper(geo: THREE.BufferGeometry, factor: number, axis?: Axis): THREE.BufferGeometry;
```
- **`applyTwist`** *(function)* — Twist around `axis`: rotation grows linearly from 0 to `angle` along the axis.
```ts
function applyTwist(geo: THREE.BufferGeometry, angle: number, axis?: Axis): THREE.BufferGeometry;
```
- **`attachPointerGesture`** *(function)* — Attach unified drag/pinch/tap/wheel gesture handling to an element.
```ts
function attachPointerGesture(el: HTMLElement, callbacks: PointerGestureCallbacks, { tapThresholdMs, tapMovePx }?: PointerGestureOptions): () => void;
```
- `el` — Element to listen on, typically the render canvas. Its
`touch-action` style is set to `none` to disable native panning/zooming.
- `callbacks` — Gesture handlers; all optional.
- `options` — Tap detection thresholds. Defaults: `tapThresholdMs: 250`,
`tapMovePx: 8`.
- returns — Detach function removing all listeners. The `touch-action` override
is not restored.
- **`attachResizeObserver`** *(function)* — Keep the renderer and camera in sync with the canvas parent's size via a.
```ts
function attachResizeObserver(renderer: THREE.WebGLRenderer, camera: THREE.Camera, canvas: HTMLCanvasElement, onResize?: ResizeHandler): () => void;
```
- returns — Detach function that disconnects the observer.
- **`bobClip`** *(function)* — Vertical bob (sine, seamless loop).
```ts
function bobClip(amp?: number, duration?: number, name?: string): THREE.AnimationClip;
```
- **`bootstrapScene`** *(function)* — Bootstrap a minimal animated scene in one call: renderer, scene, perspective.
```ts
function bootstrapScene({ canvas, onSetup }: BootstrapOptions): BootstrappedScene;
```
- `options` — Canvas plus optional setup callback; see BootstrapOptions.
- returns — A BootstrappedScene exposing the live primitives and `dispose()`.
Example
```ts
const { dispose } = bootstrapScene({
canvas,
onSetup ({ scene }) {
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)
return ({ delta }) => { mesh.rotation.y += delta }
},
})
```
Example
```ts
const anim = createAnimationController(model.scene, model.animations, ctx.loop)
anim.play('walk', { fadeIn: 0.3 })
```
, A = Partial>({ canvas, state, reducer, seed, clock, renderer: rendererOptions, camera: cameraOptions, background, lighting, orbit, modules, onFrame, onResize, render, }: AppOptions): App;
```
- `options` — App configuration; see AppOptions. Only `canvas` is required.
- returns — An App handle. `dispose()` stops the loop, detaches gestures
and the resize observer, disposes modules, lights, scene, and renderer.
Example
```ts
const app = createApp({
canvas,
state: { speed: 1 },
modules: [ turbineModule ],
onFrame: (state, frame) => hud.update(state, frame.delta),
})
app.start()
// later: app.setState({ speed: 2 }); app.dispose()
```
Example
```ts
const smoke = createEmitter({ capacity: 500, shape: { kind: 'cone', angle: 0.4 } })
scene.add(smoke.object)
loop.onFrame(ctx => smoke.tick(ctx))
```
Example
```ts
const gear = createExtrudedMesh({ shape: gearShape(12, 2, 1.4), depth: 0.5 })
```
>({ state, speed, lookSpeed, eyeHeight, pointerLock, collide, groundHeight, ...appOptions }: FpsScaffoldOptions): FpsScaffold;
```
- `options` — State source, `speed`/`lookSpeed`/`eyeHeight`,
`pointerLock` toggle, `collide` and `groundHeight` hooks, and the remaining
`AppOptions`.
- returns — An FpsScaffold with the app and an `orientation()` reader
for HUDs.
Example
```ts
const fps = createFpsScaffold({ canvas, speed: 7, groundHeight: (x, z) => terrain.height(x, z) })
fps.app.start()
```
>({ state, viewSize, flavor, near, far, pan, zoom, ground: groundOptions, ...appOptions }: IsoScaffoldOptions): IsoScaffold;
```
- `options` — State source, iso camera flavor, pan/zoom/ground settings,
and the remaining `AppOptions`.
- returns — An IsoScaffold exposing the app, camera, pan `focus`, and
ground handle.
Example
```ts
const iso = createIsoScaffold({ canvas, state: store, ground: { tile: 8 } })
iso.app.start()
```
>({ state, autoRotate, ...appOptions }: OrbitScaffoldOptions): OrbitScaffold;
```
- `options` — State source, `autoRotate` speed, and the remaining
`AppOptions`.
- returns — An OrbitScaffold with the app, the `stage` group, and
`fitTo(object, margin)` which distances the camera so the object's bounding
sphere fits with `margin` headroom (default 1.25).
Example
```ts
const viewer = createOrbitScaffold({ canvas, autoRotate: 0.4 })
viewer.stage.add(model)
viewer.fitTo(model)
viewer.app.start()
```
>({ state, segment, prefetchDistance, maxActive, lift, tension, yawRange, pitchRange, smoothing, speed, ...appOptions }: RailsScaffoldOptions): RailsScaffold;
```
- `options` — State source, the deterministic `segment` builder,
`prefetchDistance`, plus segment-stream and path-camera tuning.
- returns — A RailsScaffold with the app, the segment `stream`, and
the path-camera `rig`.
Example
```ts
const ride = createRailsScaffold({ canvas, segment: (i, rng) => tunnelSegment(rng) })
ride.app.start()
```
>({ state, target, offset, lookAhead, stiffness, rotationStiffness, ...appOptions }: TppScaffoldOptions): TppScaffold;
```
- `options` — State source, chase `target`, local-frame `offset` and
`lookAhead`, damping stiffness, and the remaining `AppOptions`.
- returns — A TppScaffold with the app and `setTarget`.
Example
```ts
const tpp = createTppScaffold({ canvas, target: hero, offset: [0, 4, -8] })
tpp.app.start()
```
Example
```ts
const lights = setupStandardLighting(scene, renderer, { sun: { intensity: 2 } })
```
Example
```ts
import { createApp, raster, primitives } from 'threejs-scenes'
```
Example
```ts
const { dispose } = bootstrapScene({
canvas,
onSetup ({ scene }) {
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)
return ({ delta }) => { mesh.rotation.y += delta }
},
})
```
, A = Partial>({ canvas, state, reducer, seed, clock, renderer: rendererOptions, camera: cameraOptions, background, lighting, orbit, modules, onFrame, onResize, render, }: AppOptions): App;
```
- `options` — App configuration; see AppOptions. Only `canvas` is required.
- returns — An App handle. `dispose()` stops the loop, detaches gestures
and the resize observer, disposes modules, lights, scene, and renderer.
Example
```ts
const app = createApp({
canvas,
state: { speed: 1 },
modules: [ turbineModule ],
onFrame: (state, frame) => hud.update(state, frame.delta),
})
app.start()
// later: app.setState({ speed: 2 }); app.dispose()
```
>(initial: S, reducer?: Reducer): Store;
```
- `initial` — Starting state. Keep it JSON-serializable (tuples, not
`Vector3`s) so it can be persisted and replayed.
- `reducer` — Optional Reducer enabling `dispatch`; without one,
`dispatch` throws.
- returns — A Store.
- **`detectTier`** *(function)* — Detect the device quality tier from cheap navigator/window heuristics.
```ts
function detectTier(): QualityTier;
```
- **`disposeMaterial`** *(function)* — Dispose a material and every texture it references.
```ts
function disposeMaterial(mat: THREE.Material): void;
```
- **`disposeScene`** *(function)* — Recursively free GPU resources under `root`: every geometry plus every.
```ts
function disposeScene(root: THREE.Object3D): void;
```
- **`getQualitySettings`** *(function)* — Resolve the preset for a tier into a QualitySettings object with the.
```ts
function getQualitySettings(tier?: QualityTier): QualitySettings;
```
- **`projectToScreenUv`** *(function)* — Project an object's world position to 0..1 screen UV space for effect.
```ts
function projectToScreenUv(object: THREE.Object3D, camera: THREE.Camera, out?: ScreenProjection): ScreenProjection;
```
- `object` — Object whose world position is projected; its world matrix must be current.
- `camera` — Camera defining the projection.
- `out` — Optional result object to fill; pass a reused one for zero per-frame allocation.
- returns — The filled ScreenProjection (the same `out` instance when provided).
- **`renderOverlay`** *(function)* — Composer-free path: call after renderer.render(mainScene, camera).
```ts
function renderOverlay(renderer: THREE.WebGLRenderer, overlayScene: THREE.Scene, camera: THREE.Camera): void;
```
- **`QUALITY_PRESETS`** *(const)* — Baseline render budgets per QualityTier: pixel ratio, shadow map.
- **`App`** *(interface)* — Running app shell returned by createApp.
- **`AppCameraOptions`** *(interface)* — Perspective-camera setup for createApp.
- **`AppModule`** *(interface)* — A scene feature in the unidirectional flow.
- **`AppOptions`** *(interface)* — Configuration for createApp.
- **`BootstrapOptions`** *(interface)* — Options for bootstrapScene.
- **`BootstrappedScene`** *(interface)* — Running scene returned by bootstrapScene.
- **`BootstrapSetup`** *(type)* — One-time setup callback for bootstrapScene.
- **`BootstrapSetupContext`** *(interface)* — Scene primitives handed to the BootstrapSetup callback.
- **`Clock`** *(interface)* — A simulation time source.
- **`ClockMode`** *(type)* — Time-advance strategy: `'wall'` passes real deltas through, `'fixed'` emits fixed-size steps.
- **`ClockOptions`** *(interface)* — Options for createClock.
- **`FrameLoopOptions`** *(interface)* — Options for createFrameLoop.
- **`OverlayHandle`** *(interface)* — Handle returned by createOverlayScene.
- **`Reducer`** *(type)* — Pure state transition: returns the next state for an action, never mutates.
- **`RendererOptions`** *(interface)* — Options for createRenderer.
- **`ResizeHandler`** *(type)* — Callback invoked after a resize with the new width and height in CSS pixels.
- **`ScreenProjection`** *(interface)* — Screen-space projection result from projectToScreenUv.
- **`Store`** *(interface)* — Minimal serializable store — the single writer of app state.
- **`StoreListener`** *(type)* — Change subscriber invoked with the new state and the state it replaced.
Example
```ts
import { createRenderer, createFrameLoop, createStore } from 'threejs-scenes/core'
```
Example
```ts
const gear = createExtrudedMesh({ shape: gearShape(12, 2, 1.4), depth: 0.5 })
```
Example
```ts
const planet = createProceduralBody({ seed: 7, type: 'terrestrial', water: true })
scene.add(planet.object)
```
Example
```ts
const rng = createSeededRng(42)
const grass = rng.fork('grass') // stable regardless of call order
```
Example
```ts
const quad = createShaderQuad({ fragmentShader: RAYMARCH_GLSL })
loop.onFrame(ctx => quad.render(ctx, renderer))
```
Example
```ts
const chunk = new VoxelChunk(16)
chunk.set(0, 0, 0, 1)
const geometry = greedyMesh(chunk)
```
Example
```ts
import { createExtrudedMesh, VoxelChunk } from 'threejs-scenes/primitives'
```
Example
```ts
const rig = createCameraController(camera, { stiffness: 5 })
rig.flyTo([0, 12, 30], [0, 0, 0], { onArrive: () => rig.follow(ship) })
loop.onFrame(ctx => rig.update(ctx))
```
Example
```ts
const smoke = createEmitter({ capacity: 500, shape: { kind: 'cone', angle: 0.4 } })
scene.add(smoke.object)
loop.onFrame(ctx => smoke.tick(ctx))
```
Example
```ts
const rig = createLightingRig(scene, renderer, { preset: 'neon' })
rig.setPreset('dramatic')
```
Example
```ts
const lights = setupStandardLighting(scene, renderer, { sun: { intensity: 2 } })
```
Example
```ts
import { createBloomPass, createCameraController } from 'threejs-scenes/raster'
```
Example
```ts
const anim = createAnimationController(model.scene, model.animations, ctx.loop)
anim.play('walk', { fadeIn: 0.3 })
```
Example
```ts
const stars = createSceneModule({
name: 'stars',
build (ctx, registerUpdate) {
const field = makeStarfield(ctx.rng)
ctx.scene.add(field)
registerUpdate(({ delta }) => field.rotation.y += delta * 0.01)
return () => { ctx.scene.remove(field); field.geometry.dispose() }
},
})
```
Example
```ts
const sky = createSkybox(scene, { gradient: { top: '#79f7ff', bottom: '#0a0a14' } })
```
({ create, limit }: ViewRegistryOptions): ViewRegistry;
```
- `options` — Renderer factory and cache limit.
- returns — A ViewRegistry keyed by view name.
- **`defineProp`** *(function)* — Validate + tag a prop definition.
```ts
function defineProp(def: PropDefinition): PropFactory;
```
- **`EditStack`** *(class)* — Snapshot-based undo/redo stack.
Example
```ts
const edits = new EditStack(initialLayout)
edits.push(nextLayout)
const restored = edits.undo()
```
Example
```ts
import { createSkybox, createPropRegistry } from 'threejs-scenes/compose'
```
(target: TargetType, source: StateSource | undefined): () => void;
```
- `app` — Anything with a `setState(partial)` method.
- `source` — The state source the scaffold was given.
- returns — A detach function that unsubscribes the mirror.
- **`isStateController`** *(function)* — Type guard: `true` when `source` is a `{ get, subscribe }` controller rather than a plain state object.
```ts
function isStateController(source: StateSource | undefined): source is StateController;
```
- **`lerpOnChange`** *(function)* — Apply-on-animate: like tweened, but pushes each interpolated value.
```ts
function lerpOnChange(source: StateController, select: (state: S) => V, apply: (value: V) => void, options?: TweenOptions): Disposable & {
```
- **`resolveInitialState`** *(function)* — Mirror an external controller into an app: seed with `resolveInitialState`,.
```ts
function resolveInitialState(source: StateSource | undefined, fallback: S): S;
```
- **`toController`** *(function)* — Normalize any state source to a controller.
```ts
function toController(source: StateSource): StateController;
```
- **`tweened`** *(function)* — Follow a numeric selection of controller state, easing every change.
```ts
function tweened(source: StateController, select: (state: S) => V, { duration, easing, stiffness }?: TweenOptions): Tweened;
```
- **`EASINGS`** *(const)* — Built-in easing curves: `linear`, `easeIn`, `easeOut`, `easeInOut` (quadratic), and `cubicOut`.
- **`Easing`** *(type)* — Easing curve: maps normalized progress `t` in [0, 1] to an eased ratio.
- **`StateController`** *(interface)* — Read side of a store: the minimal contract scaffolds consume state through.
- **`StateSource`** *(type)* — What a scaffold accepts as its state input.
- **`Tweened`** *(interface)* — A live tweened value driven by store commits.
- **`TweenOptions`** *(interface)* — Timing options for tweened and lerpOnChange: timed easing or continuous exp-damping.
- **`TweenValue`** *(type)* — Scalars and fixed-length numeric tuples — positions, scales, rgb colors.
Example
```ts
import { toController, tweened } from 'threejs-scenes/state'
```
>({ state, speed, lookSpeed, eyeHeight, pointerLock, collide, groundHeight, ...appOptions }: FpsScaffoldOptions): FpsScaffold;
```
- `options` — State source, `speed`/`lookSpeed`/`eyeHeight`,
`pointerLock` toggle, `collide` and `groundHeight` hooks, and the remaining
`AppOptions`.
- returns — An FpsScaffold with the app and an `orientation()` reader
for HUDs.
Example
```ts
const fps = createFpsScaffold({ canvas, speed: 7, groundHeight: (x, z) => terrain.height(x, z) })
fps.app.start()
```
>({ state, viewSize, flavor, near, far, pan, zoom, ground: groundOptions, ...appOptions }: IsoScaffoldOptions): IsoScaffold;
```
- `options` — State source, iso camera flavor, pan/zoom/ground settings,
and the remaining `AppOptions`.
- returns — An IsoScaffold exposing the app, camera, pan `focus`, and
ground handle.
Example
```ts
const iso = createIsoScaffold({ canvas, state: store, ground: { tile: 8 } })
iso.app.start()
```
>({ state, autoRotate, ...appOptions }: OrbitScaffoldOptions): OrbitScaffold;
```
- `options` — State source, `autoRotate` speed, and the remaining
`AppOptions`.
- returns — An OrbitScaffold with the app, the `stage` group, and
`fitTo(object, margin)` which distances the camera so the object's bounding
sphere fits with `margin` headroom (default 1.25).
Example
```ts
const viewer = createOrbitScaffold({ canvas, autoRotate: 0.4 })
viewer.stage.add(model)
viewer.fitTo(model)
viewer.app.start()
```
>({ state, segment, prefetchDistance, maxActive, lift, tension, yawRange, pitchRange, smoothing, speed, ...appOptions }: RailsScaffoldOptions): RailsScaffold;
```
- `options` — State source, the deterministic `segment` builder,
`prefetchDistance`, plus segment-stream and path-camera tuning.
- returns — A RailsScaffold with the app, the segment `stream`, and
the path-camera `rig`.
Example
```ts
const ride = createRailsScaffold({ canvas, segment: (i, rng) => tunnelSegment(rng) })
ride.app.start()
```
>({ state, target, offset, lookAhead, stiffness, rotationStiffness, ...appOptions }: TppScaffoldOptions): TppScaffold;
```
- `options` — State source, chase `target`, local-frame `offset` and
`lookAhead`, damping stiffness, and the remaining `AppOptions`.
- returns — A TppScaffold with the app and `setTarget`.
Example
```ts
const tpp = createTppScaffold({ canvas, target: hero, offset: [0, 4, -8] })
tpp.app.start()
```
Example
```ts
import { createIsoScaffold, createOrbitScaffold } from 'threejs-scenes/scaffold'
```
Example
```ts
import * as webgpuPost from 'threejs-scenes/webgpu'
```
Example
```ts
// tsconfig: { "jsx": "react-jsx", "jsxImportSource": "threejs-scenes/jsx" }
const tree =
```
Example
```ts
const [spin, setSpin] = signal(0)
const handle = render(
[0, spin(), 0]} />
,
{ canvas },
)
// …later: handle.dispose()
```
Example
```ts
import { render, h, signal } from 'threejs-scenes/jsx'
```
Example
```ts
// tsconfig: { "jsx": "react-jsx", "jsxImportSource": "threejs-scenes/jsx" }
const tree =
```
Example
```ts
import { jsx, jsxs, Fragment } from 'threejs-scenes/jsx/jsx-runtime'
```