effect-three

Declarative Three.js for Foldkit

Scenes
from
state.

Describe a 3D scene as plain data derived from your Model. Foldkit renders it, keyed updates keep every object in place, and Effect owns every GPU lifetime. Pointer input comes back as your own typed Messages.

Explore the playground All examples

Live: hover a shape, click to repaint it.

Live examples

Change the state. Watch the scene follow.

Read the guide
ReconciliationReconciliation playground: two shelves of coloured cubes above a panel counting created, updated and moved objects.Reconciliation playground: two shelves of coloured cubes above a panel counting created, updated and moved objects.

Watch every update

StateSculpture: coloured blocks, balls and drums stacked on a grey plate, with a palette, piece picker and history slider.Sculpture: coloured blocks, balls and drums stacked on a grey plate, with a palette, piece picker and history slider.

Build, then rewind

Data3D bar chart: three rows of blue, orange and green bars for six months, with gridlines on the back wall.3D bar chart: three rows of blue, orange and green bars for six months, with gridlines on the back wall.

Chart in three dimensions

Light and materialStudio: a torus, capsule, cone, ball and crate in different finishes on a pale floor, casting soft shadows under a spot light.Studio: a torus, capsule, cone, ball and crate in different finishes on a pale floor, casting soft shadows under a spot light.

Drag it into the light

PerformanceCity: a grid of ten thousand blue buildings, tallest in the centre, on a pale ground.City: a grid of ten thousand blue buildings, tallest in the centre, on a pale ground.

A city in one draw call

PhysicsToybox: coloured crates and balls scattered in a pale tray, casting soft contact shadows.Toybox: coloured crates and balls scattered in a pale tray, casting soft contact shadows.

Throw the toys around

PhysicsMarble machine: gold and teal marbles behind glass, on a coral paddle wheel above two labelled bins.Marble machine: gold and teal marbles behind glass, on a coral paddle wheel above two labelled bins.

Sort them by colour

LabelsType gallery: a dark curved wall with a gold-and-white title and spotlit plaques of text, one showing coloured code.Type gallery: a dark curved wall with a gold-and-white title and spotlit plaques of text, one showing coloured code.

Every word is data

Physics and labelsBowling: a blue ball rolling down a polished wooden lane towards ten white pins, under a dark scoreboard.Bowling: a blue ball rolling down a polished wooden lane towards ten white pins, under a dark scoreboard.

Ten frames, all data

EditingArrange: a rounded crate with a red, green and blue transform gizmo on a table with a ball, a cone and a ring.Arrange: a rounded crate with a red, green and blue transform gizmo on a table with a ball, a cone and a ring.

Move, turn, scale, undo

EditingEditor: a crate, a ball and a light marker on a grid floor, with a transform gizmo and panels for the scene, an inspector, history and changes.Editor: a crate, a ball and a light marker on a grid floor, with a transform gizmo and panels for the scene, an inspector, history and changes.

A scene editor

Playing togetherTabletop: a tower of coloured blocks on a walled table, with balls thrown at it.Tabletop: a tower of coloured blocks on a walled table, with balls thrown at it.

One world, every peer

Lines and pointsCurves: a glowing gradient curve through five outlined handles, a gold comet trailing a ribbon, and stars behind.Curves: a glowing gradient curve through five outlined handles, a gold comet trailing a ribbon, and stars behind.

Draw with data

WebXRXR room: a sofa, table and lamp in a warm room, with potted plants on the rug.XR room: a sofa, table and lamp in a warm room, with potted plants on the rug.

Step into the room

AssetsWorkshop: a small blue robot with a coral arm raised, standing on a pale tiled floor.Workshop: a small blue robot with a coral arm raised, standing on a pale tiled floor.

Load it, play it, let it go

ResourcesShared resources: two spinning cubes painted with the same material.Shared resources: two spinning cubes painted with the same material.

Share what the GPU holds

Built with effect-three

A tech radar you can fly through.

Open the tech radar

A whole site on effect-three and Foldkit: a 3D tech radar written as markdown. It steps back through earlier editions, every view is a shareable link, and each entry opens a page of its own.

Scenes are data

No closures, no three.js objects in your Model. Derive the scene in your view; keyed updates change only what changed.

Effect owns lifetimes

Renderers, GPU resources, frame loops and listeners live in a Scope. Unmount, fail or interrupt, and everything is released.

Explicit interaction

Clicks and hovers arrive as your typed Messages. Animation runs in the frame loop and never touches update.

From Model to mesh.

Describe it once. Change the Model. The scene follows.

Read the quick start 
const sceneFor = (model: Model) =>
  scene({
    children: [
      mesh({
        key: 'cube',
        geometry: box(),
        material: standard({ color: model.colour }),
        rotation: spin({ axis: 'y', radiansPerSecond: 1 }),
        interactive: true,
      }),
    ],
  });