Taos Engine ▦ Taos: API Documentation

10 — Other Worlds

▶ Live demo: run this tutorial in your browser — built from src/10_other_worlds.ts. Append ?gmapsKey=... to enable the Street View panel.

The geo module isn't Earth-only, and it isn't only-3D. This final tutorial covers two unrelated-but-useful features: streaming non-Earth bodies (the Moon, with a custom ellipsoid and GeoFrame.atEcef), and dropping into Google Street View from a click on the globe. Sources: samples/geo_moon.ts, samples/geo_street_view.ts.

Part A — the Moon and other bodies#

Everything in tutorials 1–9 assumed WGS84 Earth. To stream another body you change three things: anchor the frame in raw ECEF, tell the tileset the body's ellipsoid, and (if the body isn't centered at the universe origin) give its center offset.

Anchor with GeoFrame.atEcef#

atLonLat bakes in Earth's ellipsoid, so for the Moon you anchor directly in ECEF. Put the origin on the lunar surface with the radial direction as "up":

import { GeoFrame } from 'taos/geo/index.js';

const MOON_RADIUS = 1_737_400;                      // meters (a sphere)
const bodyCenter = { x: 0, y: 0, z: 0 };            // Moon at the universe origin
const up = { x: 0, y: 0, z: 1 };                    // radial direction at our anchor
const surfaceAnchor = {
  x: bodyCenter.x + MOON_RADIUS * up.x,
  y: bodyCenter.y + MOON_RADIUS * up.y,
  z: bodyCenter.z + MOON_RADIUS * up.z,
};
const frame = GeoFrame.atEcef(surfaceAnchor, up);   // up need not be normalized

GeoFrame.atEcef(origin, up) derives the East-North-Up basis from up, so the floating origin behaves exactly like the Earth case — including the auto-reanchor geo.attach(engine, { cameraGO }) installs.

Stream lunar tiles with a custom ellipsoid#

The well-known Cesium Moon terrain asset is ION_ASSETS.cesiumMoon. Pass the body's ellipsoid (a sphere here) and its center via GeoTilesetOptions so tiles are positioned about the Moon, not the Earth:

import { GeoScene, resolveIonAsset, ION_ASSETS } from 'taos/geo/index.js';

const geo = new GeoScene(device, frame);
geo.add3DTiles(await resolveIonAsset(ION_ASSETS.cesiumMoon, ION_TOKEN), {
  regionEllipsoid: { a: MOON_RADIUS, b: MOON_RADIUS },   // sphere
  bodyOffset: bodyCenter,                                 // ECEF offset of the body
  albedoBoost: 1.5,                                       // lunar regolith is dark
});

The same two options (regionEllipsoid, bodyOffset) appear on loadAnchor's placement as ellipsoid / bodyCenter — so you can plant a lander model on the Moon with tutorial 4's loadAnchor, and it stands radially on the lunar surface instead of leaning toward Earth.

Everything else — the geo.attach wiring, reanchoring, the deferred preset — is unchanged. An airless body just wants a black sky (no atmosphere feature) and a full star field. geo_moon.ts is the complete reference.

Part B — Google Street View#

StreetViewPanel wraps the Google Maps JavaScript Street View widget so you can two-way-sync it with the globe: click the Taos globe to drop into that street panorama, and as the user walks the panorama, move a marker on the globe.

Needs a Google Maps JavaScript API key with the Street View service enabled.

import { StreetViewPanel } from 'taos/geo/index.js';

const panel = await StreetViewPanel.load({
  apiKey: GOOGLE_MAPS_KEY,
  container: document.getElementById('streetview')!,   // a sized DOM element
  lon: -122.4194,
  lat: 37.7749,
  pov: { heading: 0, pitch: 0 },
  onPositionChanged: (lon, lat) => placeGlobeMarker(lon, lat),   // panorama → globe
  onPovChanged: (pov) => { /* optional: aim the globe camera to match */ },
});

To drive it from the globe — e.g. the user clicks, you ray-cast to a lat/lon (tutorial 4), then load that panorama:

const { lonDeg, latDeg } = screenToLonLat(mouseX, mouseY, distMeters);
panel.setLocation(lonDeg, latDeg);

Other methods: panel.setPov({ heading, pitch }) and panel.getLocation(). The Taos side is fully in your control; the panorama is Google's widget rendered into the DOM container you supplied (overlay it beside or over the canvas). geo_street_view.ts wires the click→pegman→panorama→marker round trip.

You've finished the series#

You can now stream a globe, keep it precise as you fly, layer datasets and imagery, place and pick your own content, light it with a real atmosphere and clouds, clip it, drape vector data, project imagery onto the world, collide against terrain, and even leave Earth.

Where to go next — two reference tutorials that cut across the whole series: