Generates 3D city maps from OpenStreetMap data using React-Three-Fiber

Описание и применение

Создание интерактивных 3D‑карты города из данных OpenStreetMap с помощью React‑Three‑Fiber

Задача

Creating realistic 3D city visualizations from freely available OpenStreetMap data

Результат

A fully functional, client‑side 3D city map that can be embedded in web applications, leveraging open data and modern React tooling

Рабочий процесс

• 1. Retrieve OSM data via Overpass API or local .osm file
• 2. Parse OSM XML/JSON to extract building footprints and heights
• 3. Convert footprints into Three.js geometry (extruded shapes)
• 4. Set up a React‑Three‑Fiber scene with camera, lights, and controls
• 5. Render the geometry as 3D meshes in the browser
• 6. Add interactivity (hover, click) to display building info

Доказательства

Generates 3D city maps from OpenStreetMap data using React-Three-Fiber

Источник