tp

Lab source code — step-by-step snapshots

Each subfolder contains a self-contained webpack project at that stage of the TP.

Folder structure

tp/
├── step-00-setup/              GlobeView + orthophoto (webpack starter)
├── step-01-globeview/          Paris camera (range 6 km, tilt 45°)
├── step-02-ign-basemap/        IGN elevation layers + orthophoto JSON
├── step-03-transport/          Metro/tram/RER lines + RATP stations
├── step-04-buildings-3d/       Extruded BD Topo buildings
├── step-05-flood-risk/         1910 floodable basement zones
├── step-06-layer-menu/         Checkbox layer toggle panel
├── step-07-widgets/            Minimap + navigation widgets
├── step-08-3dtiles/            OGC 3D Tiles layer
├── step-09-lidar/              LiDAR HD point cloud (EPT)
├── step-10-project-structure/  Final layout (index.js → app.js)
├── step-11-tour-eiffel/        Tour Eiffel Collada model
└── step-12-gltf-scene/         Notre-Dame glTF + complete demo

How to run a step

From the project root (after npm install at root):

npm run tp:03    # example: transport layers

Or manually inside a snapshot:

cd tp/step-03-transport
npm install
npm start        # → http://localhost:8080

The complete demo is in step-12-gltf-scene (Notre-Dame glTF + Tour Eiffel Collada).

Mapping to TP.md

TP step	Code folder
Step 0 — Project setup	step-00-setup
Step 1 — Paris camera	step-01-globeview
Step 2 — IGN elevation	step-02-ign-basemap
Step 3 — Transport	step-03-transport
Step 4 — 3D buildings	step-04-buildings-3d
Step 5 — Flood risk	step-05-flood-risk
Step 6 — Layer menu	step-06-layer-menu
Step 7 — Widgets	step-07-widgets
Step 8 — 3D Tiles	step-08-3dtiles
Step 9 — LiDAR HD (EPT)	step-09-lidar
Step 10 — Project structure	step-10-project-structure
Step 11 — Tour Eiffel (Collada)	step-11-tour-eiffel
Step 12 — glTF model	step-12-gltf-scene

Regenerating snapshots

After changing the root src/ code, regenerate all step folders:

node scripts/generate-tp-steps.mjs