Technologies
/
From CesiumJS
The same things, written with Ortho Earth
3D Tiles · I3S · quantized-mesh terrain · glTF/GLB · WGS84 ellipsoid · CZML · the clock
Ortho Earth is a 3D globe map engine for the browser (WebGPU with a WebGL2 fallback) whose API follows MapLibre GL JS.
Many of the things you do in CesiumJS have a counterpart here. This page lists them side by side: what you write in CesiumJS, what you write in Ortho Earth,
and a page where you can see it running. All examples assume const map = await createGlobe({ target: "#map" })
from npm i @ortho-earth/globe.
| Topic | CesiumJS | Ortho Earth | See it |
|---|---|---|---|
| 3D Tiles | await Cesium3DTileset.fromUrl(url) + scene.primitives.add(tileset) | await map.add3DTiles(url) | The Netherlands in 3D (3DBAG tileset) |
| I3S scene layers | I3SDataProvider.fromUrl(url) | await map.addI3S(url) | — |
| quantized-mesh terrain | CesiumTerrainProvider.fromUrl(url) | map.setTerrain({ source: { type: "quantized-mesh", url: ".../layer.json" } }) | quantized-mesh example |
| Cesium ion terrain | CesiumTerrainProvider.fromIonAssetId(id) | map.setTerrain({ source: { type: "quantized-mesh", ion: { assetId, accessToken } } }) | — |
| Ellipsoidal vs orthometric heights | heights above the ellipsoid | heights: "ellipsoidal" (default; a bundled EGM96 geoid turns them into elevations) or "orthometric" | — |
| glTF / GLB models | Model.fromGltfAsync({ url, modelMatrix }) | await map.gadget.model(url, { at: [lon, lat], heading, scale }) — a CESIUM_RTC or ECEF placement in the file wins | GLB models |
| three.js in the scene | — | map.addThree({ three, module }) — runs in the render worker, on the same camera, hidden by terrain and buildings | 3D Tiles with three.js |
| Topic | CesiumJS | Ortho Earth | See it |
|---|---|---|---|
| WGS84 ellipsoid | Ellipsoid.WGS84 (always) | createGlobe({ ellipsoid: true }) or ?ell=1; "auto" (default) uses the ellipsoid on capable desktops. Measurements are always WGS84 | Japan on the ellipsoid |
| Fly the camera | camera.flyTo({ destination }) | map.flyTo({ center: [lon, lat], zoom, pitch, bearing }) | Globe |
| Set the camera | camera.setView({ destination, orientation }) | map.jumpTo({ … }) or map.setCamera({ lng, lat, height, heading, pitch, roll }) | — |
| Follow a moving object | viewer.trackedEntity = entity | map.follow(target) — a point, a function of time, or the id of a loaded CZML track | Satellites |
| Look at a point | camera.lookAt(target, offset) | await map.lookAt(target) | — |
| Topic | CesiumJS | Ortho Earth | See it |
|---|---|---|---|
| The clock | viewer.clock | map.clock — one clock for the night side, the stars, satellites and timed data | World clock |
| Clock range | clock.clockRange = ClockRange.LOOP_STOP | map.clock.setRange(start, end, "loop") — "clamped", "loop", "unbounded" (the CZML names are accepted too) | — |
| CZML | CzmlDataSource.load(url) | Drop a .czml file on the map (map.gadget.dropFile()): sampled positions play on map.clock with the same interpolation (ECEF, linear / Lagrange); billboards, labels and paths are drawn while available; the document clock is copied to the map clock | ortho-japan (drop a file) |
| Sun and shadows | viewer.shadows = true | await map.sunShadow({ mode: "instant" }) or "duration" (hours of shadow) | — |
| Visibility analysis | — | map.viewshed() · map.lineOfSight(a, b) | — |
style.json, setPaintProperty and queryRenderedFeatures work as in MapLibre GL JS. If you also know MapLibre, see From MapLibre GL JS.map.overlay(module), map.addThree() or a custom layer with a url.
The full list of methods is in the package's type definitions (@ortho-earth/globe/globe.d.ts) and the
engine overview. Step-by-step setup is in Build with Ortho Earth.