# xanyax/3d-navigation-map architecture

> Architecture diagram of the GitHub repository xanyax/3d-navigation-map, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/xanyax/3d-navigation-map
- Repository: https://github.com/xanyax/3d-navigation-map

## Overview

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`](https://github.com/xanyax/3d-navigation-map/blob/main/aStar_diagonal_final_path_only.js) (A* routing), [`main.html`](https://github.com/xanyax/3d-navigation-map/blob/main/main.html) (Navigation page), [`map.js`](https://github.com/xanyax/3d-navigation-map/blob/main/map.js) (3D scene and controls), [`style.css`](https://github.com/xanyax/3d-navigation-map/blob/main/style.css) (UI styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["User interface"]
  node_page["Navigation page<br/>[main.html]"]
  node_styles["UI styling<br/>[style.css]"]
  node_locations["Location selection<br/>[main.html]"]
  node_alerts["Route alerts<br/>[main.html]"]
end

subgraph group_routing["Route planning"]
  node_astar["A* routing"]
  node_grid["Floor grid<br/>[Node.js]"]
end

subgraph group_views["Map views"]
  node_twod["2D map canvas"]
  node_threed["3D scene and controls<br/>[map.js]"]
end

subgraph group_assets["Building data"]
  node_floor_maps["Floor map assets"]
  node_model["3D building model<br/>[56_16.0.gltf]"]
end

node_visitor(("Visitor"))
node_three["Three.js"]
node_p5["p5.js"]
node_browser["Browser APIs"]

node_visitor -->|"opens"| node_page
node_page -->|"presents"| node_locations
node_page -->|"hosts"| node_twod
node_page -->|"hosts"| node_threed
node_page -->|"loads"| node_styles
node_locations -->|"submits locations"| node_astar
node_astar -->|"builds grid"| node_grid
node_astar -->|"draws route"| node_twod
node_astar -->|"reports errors"| node_alerts
node_astar -->|"provides route"| node_threed
node_astar -->|"uses floor maps"| node_floor_maps
node_twod -->|"renders with"| node_p5
node_threed -->|"loads model"| node_model
node_threed -->|"renders with"| node_three
node_threed -->|"uses controls"| node_browser

click node_page "https://github.com/xanyax/3d-navigation-map/blob/main/main.html"
click node_styles "https://github.com/xanyax/3d-navigation-map/blob/main/style.css"
click node_locations "https://github.com/xanyax/3d-navigation-map/blob/main/main.html"
click node_alerts "https://github.com/xanyax/3d-navigation-map/blob/main/main.html"
click node_astar "https://github.com/xanyax/3d-navigation-map/blob/main/aStar_diagonal_final_path_only.js"
click node_grid "https://github.com/xanyax/3d-navigation-map/blob/main/Node.js"
click node_floor_maps "https://github.com/xanyax/3d-navigation-map/tree/main/map"
click node_model "https://github.com/xanyax/3d-navigation-map/blob/main/map/56_16.0.gltf"
click node_twod "https://github.com/xanyax/3d-navigation-map/blob/main/aStar_diagonal_final_path_only.js"
click node_threed "https://github.com/xanyax/3d-navigation-map/blob/main/map.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_page,node_styles,node_locations,node_alerts,node_browser toneBlue
class node_astar,node_grid toneAmber
class node_twod,node_threed toneMint
class node_floor_maps,node_model toneRose
class node_visitor,node_three,node_p5 toneIndigo
```

## Components

### User interface

- [Navigation page](https://github.com/xanyax/3d-navigation-map/blob/main/main.html): `main.html`
- [UI styling](https://github.com/xanyax/3d-navigation-map/blob/main/style.css): `style.css`
- [Location selection](https://github.com/xanyax/3d-navigation-map/blob/main/main.html): `main.html`
- [Route alerts](https://github.com/xanyax/3d-navigation-map/blob/main/main.html): `main.html`

### Route planning

- [A* routing](https://github.com/xanyax/3d-navigation-map/blob/main/aStar_diagonal_final_path_only.js): `aStar_diagonal_final_path_only.js`
- [Floor grid](https://github.com/xanyax/3d-navigation-map/blob/main/Node.js): `Node.js`

### Map views

- [2D map canvas](https://github.com/xanyax/3d-navigation-map/blob/main/aStar_diagonal_final_path_only.js): `aStar_diagonal_final_path_only.js`
- [3D scene and controls](https://github.com/xanyax/3d-navigation-map/blob/main/map.js): `map.js`

### Building data

- [Floor map assets](https://github.com/xanyax/3d-navigation-map/tree/main/map): `map`
- [3D building model](https://github.com/xanyax/3d-navigation-map/blob/main/map/56_16.0.gltf): `map/56_16.0.gltf`

### Other components

- **Visitor**
- **Three.js**
- **p5.js**
- **Browser APIs**

## Connections

- 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