Skip to main content

Hot scene changes

A scene is data, and the engine keeps the live three.js graph in sync with it by reconciling on id. Hand it a new definition and only what actually changed is rebuilt — add a wing or drop one while the visitor is moving, and the camera keeps its pose.

With the engine​

const gallery = createGallery(scene, { canvas });
gallery.start();

// Later — same ids stay mounted, new ids are added, missing ids are removed:
gallery.setScene(nextScene);

With React​

Just pass a new scene prop. The <Gallery> component feeds it through setScene for you — no remount.

function App() {
  const [withWing, setWithWing] = useState(false);
  const scene = useMemo(() => buildScene(withWing), [withWing]);

  return (
    <>
      <Gallery scene={scene} />
      <button onClick={() => setWithWing((v) => !v)}>Toggle wing</button>
    </>
  );
}

How reconciliation works​

For both walls and artworks the engine keeps a registry keyed by id plus a JSON snapshot of each item:

  • id present, unchanged → left untouched.
  • id present, changed → the old object is disposed and rebuilt.
  • id new → built and added.
  • id gone → removed and disposed.

An artwork is also rebuilt when the wall it hangs on changes, since its placement derives from that wall. This per-id diffing is what makes live editing cheap.