Items
3D scene items. Points, lines, curves, and more
Items are the visual elements that make up your 3D scene. Uzay provides several types of items for different purposes.
Creating Items
Use scene.create(kind, options) to add items to a scene:
const point = scene.create("point3d", {
coords: vec3(1, 2, 3),
color: "red",
radius: 2,
});The first argument is the item type, and the second is an options object where you configure the item's properties.
Reactive Properties
Every property can be either a plain value or an atom:
scene.create("point3d", { radius: 2 });
const r = scene.atom(2);
scene.create("point3d", { radius: r });
r.set(5);You can also use derived atoms for computed properties:
const t = scene.atom(0);
scene.create("point3d", {
coords: scene.atom((get) => {
const time = get(t);
return vec3(Math.cos(time), Math.sin(time), 0);
}),
});Available Items
| Item | Description | Common Use Cases |
|---|---|---|
| Point3D | A sphere at a 3D position | Markers, vertices, handles |
| Line3D | A line segment between two points | Connections, edges |
| Vector3D | An arrow with origin and direction | Forces, velocities, normals |
| ParametricFunction3D | A curve defined by a parametric equation | Helixes, spirals, paths |
| Surface3D | A surface defined by a height function | Terrain, potential fields, function plots |
| Sphere3D | A sphere with center and radius | Volumes, regions, atoms |
| Plane3D | A rectangular surface with normal vector | Surfaces, walls, cross-sections |
| Overlay3D | A 2D label anchored to a 3D position | Labels, equations, annotations |
| Axes3D | Coordinate axes | Reference, orientation |
| Grid3D | A grid on a plane | Reference planes, floors |
| Camera3D | A viewpoint into the scene | Required for rendering |
Removing Items
Remove items from the scene with scene.remove():
const point = scene.create("point3d", { coords: vec3(1, 1, 1) });
// Later
scene.remove(point);Tags
All items support a tags property for categorization:
const p1 = scene.create("point3d", {
coords: vec3(0, 0, 0),
tags: ["3d", "2d"],
});
const p2 = scene.create("point3d", {
coords: vec3(1, 0, 0),
tags: ["3d"],
});Tags are currently unused. In the future, it'll be used for grouping items, and different views and cameras will be able to filter items by tag.