Core Concepts

Here's a quick overview of how Uzay is structured before diving into the details.

Scene

A Scene holds all your 3D objects and manages their state. You create a scene, add items to it, and connect it to a View that handles rendering to a canvas element.

const scene = new Scene3D();
const point = scene.create("point3d", { coords: vec3(1, 2, 3) });

The scene only holds state. The view handles rendering with Three.js, and automatically re-renders when anything changes. A single scene can have multiple views with different cameras.

Learn more about Scenes & Views

Atoms

Atoms are reactive state containers. Any property on any item can be an atom, and when that atom's value changes, the visualization updates automatically.

const radius = scene.atom(2);
const point = scene.create("point3d", { radius });

// The point updates automatically
radius.set(5);

You can also create derived atoms that compute values from other atoms:

const t = scene.atom(0);
const position = scene.atom((get) => {
  const angle = get(t);
  return vec3(Math.cos(angle), Math.sin(angle), 0);
});

Learn more about Atoms

Items

Items are the visual elements in a scene: points, lines, vectors, parametric curves, surfaces, overlays, and more. Every item property is an atom, so items are reactive by default.

const line = scene.create("line3d", {
  start: vec3(0, 0, 0),
  end: point.coords,
  color: "dodgerblue",
});

Browse all items

Constructions

Constructions are reusable functions that compose items into higher-level mathematical objects. A tangent line, a draggable point on a curve, a surface normal: these are all constructions built from the same primitives you have access to.

const p = curvePoint(scene, { f: myFunc, initialT: 0.5 });
const tl = tangentLine(scene, { f: myFunc, t: p.t });

Browse all constructions

Interactions

Points and vectors are draggable out of the box. You can also listen for drag, click, and hover events on any item.

Learn more about Interactions