Rendering

A renderer is a reader. It draws every Scene Object, follows the scene's events to stay in step, and reports what the user picked. It never writes to the world: a click becomes an id passed to your code, and your code decides what, if anything, changes.

@klorad/engine-three draws with three.js. It is the renderer of 0.1.

Frames

The scene's local frame (east, north, up in metres) maps to three.js as east is +x, up is +y, north is -z. localToThree, threeToLocal and geoToThree convert for code that adds its own three.js objects.

What it shows by default

With no style function, colour encodes correspondence (objects, shadows and twins each have their own) and freshness (a shadow whose readings have gone stale is drawn in the stale colour). A newer reading or a Behaviour's Animation makes the object flash. Objects with geometry: { kind: "model", uri } load a glTF model.

Your own looks

objectStyle maps an object's state to how it looks: colour, opacity and a height scale. It receives the object, its current readings, whether they are stale, and the palette.

import { createScene } from "@klorad/api/world";
import { createThreeRenderer } from "@klorad/engine-three";

const scene = createScene({ coordinateSystem: { origin: { lat: 40.62637, lon: 22.94838 } } });
scene.add({ name: "Exhibition hall", position: { east: 0, north: 0 }, geometry: { kind: "box", width: 24, depth: 14, height: 7 } });

const renderer = createThreeRenderer({
  container: document.getElementById("view")!,
  scene,
  onPick: (id) => renderer.select(id),
  objectStyle: ({ object, readings, stale, palette }) => {
    if (stale) return { color: palette.stale };
    const people = readings.occupancy?.value;
    return typeof people === "number" ? { color: palette.shadow, heightScale: people / 20 } : { color: object.color ?? palette.object };
  },
});
renderer.frame();

In React, ThreeView from @klorad/engine-three/react takes the same options and reads the scene from the nearest KloradProvider. See Style objects by readings.