Stream 3D Tiles around a scene
Show a 3D Tiles tileset as context around a scene, placed by its coordinate system and streamed as the camera moves.
A tileset (a city model, a photogrammetry mesh) is context to look at, not objects to work
with. A scene names it as an external space with the provider "3d-tiles" and the tileset's
URL; the three.js renderer streams the tiles the camera needs and places them by the scene's
coordinate system. Nothing in a tileset becomes a Scene Object.
"use client";
import { useState } from "react";
import { KloradProvider, SceneObject } from "@klorad/react";
import { ThreeView } from "@klorad/engine-three/react";
// The neighbourhood is context: a 3D Tiles tileset, streamed and placed by the scene's
// coordinate system. It is never turned into Scene Objects.
const neighbourhood = [{ id: "neighbourhood", provider: "3d-tiles", ref: "/tiles/northgate/tileset.json" }];
export default function SiteWithContext() {
const [tiles, setTiles] = useState(0);
return (
<KloradProvider options={{ coordinateSystem: { origin: { lat: 40.66, lon: 22.865, height: 8 } } }}>
<SceneObject id="office" name="Operations office" position={{ east: 0, north: -35 }} geometry={{ kind: "box", width: 20, depth: 14, height: 9 }} />
<p>{tiles} tiles loaded</p>
<div style={{ height: 480 }}>
<ThreeView externalSpaces={neighbourhood} onTilesLoad={setTiles} />
</div>
</KloradProvider>
);
}What the renderer does
- It loads the tile loader (
3d-tiles-renderer) only when a scene names a tileset, so a page without one does not download it. - It takes the tileset's Earth centred coordinates into the scene's east, north, up frame, so the tiles sit where they are on Earth, around your objects.
- It keeps drawing while tiles arrive and stops when the ones in view have loaded.
onTilesLoadreports how many tiles with content have loaded.
In a package
A scene package keeps external spaces in its manifest (externalSpaces), so a saved scene
reopens with its context: pass package.manifest.externalSpaces to the view.
Something wrong or unclear? Tell us.