How xanyax/3d-navigation-map works
This browser application lets a visitor choose building locations, computes a grid-based A* route, and displays it on the 2D floor map and 3D building view. The principal route flow and the sampled 3D model loading and controls are shown; README-described UI behavior and integrations are represented where documented. Source excerpts are partial, so uncertain internal wiring is omitted.
Main entry points: aStar_diagonal_final_path_only.js A* routing · main.html Navigation page · map.js 3D scene and controls · style.css UI styling
Components 14
User interface
- Navigation page
main.html - UI styling
style.css - Location selection
main.html - Route alerts
main.html
Route planning
- A* routing
aStar_diagonal_final_path_only.js - Floor grid
Node.js
Map views
- 2D map canvas
aStar_diagonal_final_path_only.js - 3D scene and controls
map.js
Building data
- Floor map assets
map - 3D building model
map/56_16.0.gltf
Other components
- Visitor
- Three.js
- p5.js
- Browser APIs
Connections 15
- Visitor → Navigation page: opens
- Navigation page → Location selection: presents
- Navigation page → 2D map canvas: hosts
- Navigation page → 3D scene and controls: hosts
- Navigation page → UI styling: loads
- Location selection → A* routing: submits locations
- A* routing → Floor grid: builds grid
- A* routing → 2D map canvas: draws route
- A* routing → Route alerts: reports errors
- A* routing → 3D scene and controls: provides route
- A* routing → Floor map assets: uses floor maps
- 2D map canvas → p5.js: renders with
- 3D scene and controls → 3D building model: loads model
- 3D scene and controls → Three.js: renders with
- 3D scene and controls → Browser APIs: uses controls