Why

Japan's Project PLATEAU ships open 3D city models for 25+ cities, but the official tooling assumes CesiumJS. This library brings PLATEAU into the Three.js / React Three Fiber world with three things the official stack doesn't give you out of the box:

1. Per-building attribute coloring — drive colors from year_built, structure, height, or hazard depths.
2. Five hazard layers — river_flood, inland_flood, tsunami, storm_surge, landslide. Composition correctly distinguishes "no data" from "surveyed safe".
3. Graceful fallback — when a tile has no feature ids or fails to load styling, the runtime transparently switches to PMTiles footprint extrusion so coloring still works.

Install

npm i @yodolabs/plateau-r3f three @react-three/fiber

Quick start

import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';
import { Plateau, HazardLayer } from '@yodolabs/plateau-r3f';

export default function App() {
  return (
    <Canvas camera={{ position: [1500, 1500, 1500], near: 1, far: 1_000_000 }}>
      <ambientLight intensity={0.6} />
      <directionalLight position={[1000, 2000, 500]} intensity={1} />
      <Plateau
        city="chiyoda"
        baseUrl="https://your-cdn.example.com/plateau"
        colorBy="height"
      >
        <HazardLayer type="river_flood" opacity={0.6} />
      </Plateau>
      <OrbitControls makeDefault />
    </Canvas>
  );
}

baseUrl should point to a directory of artifacts produced by plateau-bridge (see Data pipeline). The library never calls the PLATEAU CMS at runtime.

Gallery

Features

• <Plateau> — loads 3D Tiles + per-tile Arrow style tables, patches material onBeforeCompile to color each building by feature_id.
• <HazardLayer type="..."> — composes on top of the base color. Children mount order = visual priority.
• <FootprintLayer> / <FallbackExtrusionLayer> — PMTiles-driven extruded footprints. Auto-mounts when the runtime decides PMTiles fallback is active.
• <TileDebugLayer> — wireframe boxes colored by tile lifecycle state.
• Hooks: useBuilding(key), useBuildings(filter), usePlateauContext().
• Pluggable: ArtifactResolver, registerHazardLayer(), ShaderExtension, Worker-backed Arrow decoder.

Data pipeline

This is a pure browser library — it ships no data. The upstream plateau-bridge project (Python · pip install plateau-bridge) converts PLATEAU's CityGML into browser-friendly artifacts:

out_<city>/
  manifest.json
  tile_index.json
  3dtiles/tileset.json
  3dtiles/<z>/<x>/<y>_bldg_Building.glb
  style/<urlencoded(tile_content_uri)>.arrow
  buildings.pmtiles

plateau-bridge also ships pre-built bundles for 29 cities (Tokyo 23 wards + Fukuoka / Kamakura / Nagoya / Osaka / Sapporo / Yokohama), so you typically won't need to run the conversion yourself.

Deploy that directory to any static host (S3, R2, GitHub Pages, your own CDN) and point <Plateau baseUrl="..."> at it. Our live demo hosts all 29 cities on Cloudflare R2 (~65 GB).

Attribution

Underlying PLATEAU data is © Project PLATEAU / MLIT (国土交通省) under CC BY 4.0. Apps built on this library must display the credit. The runtime exposes:

runtime.getAttribution()              // → Attribution[] with dataset id + source URL
useBuilding(key)?._attribution        // per-building attribution

Minimum footer:

© Project PLATEAU / MLIT — CC BY 4.0

Status

0.1.x — first public release. APIs may evolve in patch releases until 0.2.

| | | | --- | --- | | Unit + integration tests | 48 passing | | Multi-city verification | All 29 PLATEAU cities live in demo | | E2E user journey | 10-step Playwright on chromium / firefox / webkit | | Browser render check | headless Chromium + WebGL | | Visual regression | 3 baseline shots, pixel-diff with 5% tolerance | | Bundle | ~64 KB ESM, ~68 KB CJS, ~24 KB .d.ts |

See docs/ for the full guide and API reference.

License

MIT — see LICENSE.

PLATEAU data is licensed separately under CC BY 4.0 by the data owner.