TerraSlice 3D
Pick a region on the globe (draw it, or import KML/KMZ, Shapefile or GeoJSON) and build an interactive 3D block model. The model includes real terrain, satellite imagery, roads and rail, realistic buildings, and a layered subsurface that can come from presets or from real borehole logs. It also has analysis tools: cross-sections, flooding and groundwater.
Live app: https://quanta1985.github.io/terraslice3d/ (HTTPS, so Google Earth Engine sign-in works) · mirror: http://remosat.usth.edu.vn/~quanta/terraslice3d/
Run
The app needs no build step. Serve the folder and open it in Chrome or Edge:
python -m http.server 8000
# → http://localhost:8000
Features
| Area | What it does |
|---|
| Region | Draw a polygon (D): a label at the cursor shows the area live and turns amber past 40 km² (the OSM-buildings and direct Earth Engine limit). Search places, import .kml/.kmz, a zipped shapefile, .shp + .prj or .geojson, or drop files on the map. You can export the region as GeoJSON. |
| Buildings | Procedural 3D (no key): OSM footprints extruded to their height, with gabled or pyramidal roofs (from roof:shape, or the default for houses). Three styles: Architectural white model (default), Urban materials (muted concrete, stone and terracotta; loud OSM colour tags are toned down) and Height ramp (pick a ramp; it stretches from 0 m to the region's tall buildings). All are lit like a massing model, with soft darkening at the base and optional thin edge lines. Photorealistic 3D Tiles: Google photogrammetry through a Google Maps API key (Map Tiles API) or a Cesium ion token. The key is stored only in the browser. Building heights from Google Open Buildings: run tools/gee_open_buildings_heights.js in the Earth Engine Code Editor, then import its GeoJSON. It fills OSM buildings that have no height and adds footprints OSM lacks. |
| Layers | Imagery (satellite / topo / streets), relief shading, vertical exaggeration, roads (Muted cartographic with casings by default, Monochrome light / dark, or Classic vivid; width ×), contours (interval, colour, line width), subsurface, and region isolation. Wireframe (W): replaces the imagery with an adaptive TIN of the terrain: many small triangles where the ground is rugged, a few big ones where it is flat. Faces are flat-shaded, edges are coloured by elevation, and a Mesh detail slider sets the tolerance (the triangle count is shown), and you can pick the colour ramp (9 ramps, legend shows the elevation range). |
| Subsurface | 7 presets, seeded random columns, a layer editor, depth exaggeration, explode, undulation and X-ray. Borehole CSV import: layers come from the logs and thickness is interpolated between boreholes (IDW). 3D borehole logs are drawn in the model. |
| Analysis | Cross-section (X): a 3D section wall plus a report-ready 2D chart with layers, boreholes, water table and flood, exported as SVG / PNG / CSV. Flood (F): a water level with flooded area (% and km²). Groundwater (G): a water-table depth line. Clicking any point gives a virtual borehole. |
| 3D objects | A toolbox of 19 preset shapes in four groups. Geotech: drill rig, borehole marker, piezometer, monitoring station, survey benchmark. Infrastructure: pylon, wind turbine, water tower, chimney, bridge pier. Nature: conifer, broadleaf tree, rock, flag. Generic: box, cylinder, cone, sphere and wall, sized in metres. Click a shape, then the model: objects can only be placed inside the region. Drag to move; set heading, scale, colour and label; duplicate or delete (Del). |
| View | Top / oblique / side / under / globe, ⟲ Reset view (R), ↺ Reset settings (every control back to its default; the region, boreholes and objects stay), PNG screenshot. North arrow: classic needle, compass rose, survey star or minimal; any corner, 44–140 px; it turns with the view, a click (or N) faces north, and screenshots include it. |
| Project | Save / open a .json project holding the region, layers, boreholes, section, objects and settings. |
Building heights (Google Open Buildings)
Open Buildings v3 polygons have no height field. The heights come from the separate Open Buildings 2.5D Temporal raster (building_height, 4 m, 2016–2023). The script joins them; this route works for regions of any size:
- Choose the region, then Layers → Human built-up → ⇩ GEE script (.js) (or ⧉ Copy & open GEE). The script already contains the region and the year / confidence / presence settings. Both buttons ask for a password once per browser tab (ask the author).
- Paste it into the Earth Engine Code Editor and press Run. Check the map, then run the Drive export from Tasks and download the GeoJSON (
height_m, height_max, confidence, source).
- Build the model in TerraSlice, then drop the file on the map, or use Layers → Import building heights. Above 40 km² OSM buildings are not loaded, so the imported footprints are the buildings (up to 150,000; the largest are kept beyond that).
The plain template is tools/gee_open_buildings_heights.js (draw geometry yourself, or it uses the Hanoi demo).
Or fetch them directly (no export, no download): Layers → Human built-up → ☁ Fetch heights from Earth Engine signs you in with Google (OAuth popup) and runs the same query in your Earth Engine project for the current region (≤ 40 km², year 2016–2023). Nothing secret is stored in the app: the OAuth client ID is public, and the sign-in token stays in your browser. Google allows this only on HTTPS pages or http://localhost: use the GitHub Pages address above, or run locally with start_local.bat (Windows) / python -m http.server 8000 and open http://localhost:8000.
One-time setup in Google Cloud (project ee-quantrananhhumg1):
- APIs & Services → Library: check that Google Earth Engine API is enabled.
- Google Auth Platform → Branding / Audience: app name "TerraSlice 3D", audience External, and add your Google account under Test users.
- Clients → Create client: type Web application; Authorized JavaScript origins
https://quanta1985.github.io and http://localhost:8000 (add https://remosat.usth.edu.vn once that server's HTTPS works).
- Copy the Client ID (
…apps.googleusercontent.com; no secret is needed) into Earth Engine settings in the app.
What gets imported: every v3 footprint (confidence ≥ 0.65 by default, adjustable), plus, optionally, raster-only buildings: places where the newer 2.5D raster sees a building (building_presence > 0.5) outside every v3 polygon, vectorised at 4 m. The status line shows both counts so you can compare them with the Code Editor.
Merge with OSM: tagged or level-based OSM heights are kept; an OSM building matching one footprint takes its height; an OSM outline holding two or more footprints (a whole block mapped as one building) is replaced by those houses; unmatched footprints are added (6 m when they have no height).
Borehole CSV
id,lon,lat,layer,top,bottom
BH1,105.850,21.030,Fill,0,2
BH1,105.850,21.030,Soft clay,2,14
top and bottom are metres below ground. Columns can be in any order, separated by ,, ; or tab. Layers are ordered by their mean top depth. English and Vietnamese names (sét, cát, sỏi, bùn, đá vôi…) are coloured automatically. A layer missing from a borehole counts as 0 m thick there.
Shortcuts
D draw · B build · X section · F flood · G groundwater · W wireframe · T/O/S/U views · R reset view · N face north · Del delete object · H help · Esc cancel
Data sources
Esri World Imagery / Topo, AWS Terrain Tiles (Terrarium), OpenStreetMap via Overpass (with the maps.mail.ru mirror as fallback), Photon geocoding, and optionally Google Photorealistic 3D Tiles and Google Open Buildings (CC BY 4.0, imported as a file). These are public services with fair-use limits.
Limits
- OSM buildings and the direct Earth Engine fetch: regions ≤ 40 km². Larger regions get building heights through the GEE script + import (≤ 150,000 footprints). Only major roads above 60 km²; no OSM data above 2000 km².
- Terrain is about 30 m resolution at best and the sea floor is clamped to 0 m. Heights are above sea level; in 3D Tiles mode the subsurface is shifted by a sampled ground offset so it lines up with the mesh.
- Polygon holes and multi-part regions are reduced to the largest outer ring. Regions crossing the antimeridian are not supported.
- Without boreholes the soil column is conceptual (preset or random), not measured geology.
Copyright
© 2026 Tran Anh Quan · [email protected]
Test
node tests/geo.test.js
Files
geo.js geometry, soil model, borehole parsing/IDW, building-footprint import and merge · mesh.js building meshes and the adaptive TIN (RTIN) · profile.js section chart · terrain.js Terrarium heightmap provider · buildings.js procedural buildings (architectural / urban / height-ramp styles) · ramps.js colour ramps · wire.js wireframe TIN renderer · objects.js placeable 3D objects · tiles3d.js Google 3D Tiles · osm.js Overpass + roads · subsurface.js soil walls · analysis.js flood, groundwater, borehole logs · editor.js layer editor · io.js import/export/projects · project.js search, project save/open, file routing · gee.js Earth Engine sign-in, direct height fetch and the per-region Code Editor script · north.js north arrow · draw.js drawing · ui.js panel HTML · app.js wiring. geo.js, mesh.js, profile.js and the objects.js catalogue are pure and Node-testable. tools/gee_open_buildings_heights.js is the Earth Engine script.
