map3d 完整使用指南：从 OpenStreetMap 框选区域到一键导出 GLB 的 4 步流程

map3d 完整使用指南从 OpenStreetMap 框选区域到一键导出 GLB 的 4 步流程【免费下载链接】map3d️ Generate City 3D map with R3F. Include building and road information.项目地址: https://gitcode.com/gh_mirrors/map/map3dmap3d是一款基于 React-Three-Fiber 的免费 3D 地图生成工具它读取OpenStreetMap的真实数据把任意城区的建筑与道路生成三维场景最后一键导出 GLB 模型文件可以直接用于数字孪生、无人机测绘可视化、GPS 打点等场景。全程只需 4 步无需任何建模基础。一、map3d 能做什么功能说明️ 3D 建筑按 OpenStreetMap 数据把建筑拔成立体体块高度取自height或building:levels标签️ 3D 道路自动提取区域内路网以绿色线条铺在建筑之间️ 交互查看悬停/点击建筑可弹出名称、高度、楼层、地址等详细信息 车辆模式用 WASD 键以第一人称小车视角在城中穿行 一键导出将整座城市打包下载为标准GLB文件可导入 Blender、Unity、Web 等环境⚠️ 数据说明项目使用 OpenStreetMap 数据无法保证每栋建筑的高度都准确详见 README.md。二、快速启动本地运行 map3d如果你只是想试用也可以直接访问官网演示版。想在本地跑起来只需 3 条命令git clone https://gitcode.com/gh_mirrors/map/map3d cd map3d npm install npm run dev项目使用 Vite React TypeScript 构建脚本定义见 package.json。启动后浏览器会自动打开选区页面。三、4 步流程详解整个流程由底部的Prev Step / Next Step按钮驱动顶部导航栏的Car Mode可随时切换视角TopNav.tsx。步骤 1在 OpenStreetMap 上框选区域打开页面默认进入Generate 3d map步骤拖动、缩放二维地图找到目标城区默认定位在美国纽约一带点击右上角蓝色Select Box按钮地图锁定后在图上按住鼠标拖出一个蓝色矩形框选不满意时点击红色Remove Box清除重来。这一步的核心逻辑在 SelectMap.tsxMapComponent用 Leaflet 渲染 OpenStreetMap 瓦片RectangleSelector负责捕获鼠标事件并绘制选区。选区坐标会存入 areaStore.ts 的状态中供后续步骤使用。步骤 2点击 Next Step 拉取建筑数据第一次点击Next Step时map3d 会向 Overpass API 发起查询把选区内所有building类型的要素取回来实现见 App.tsx 的requestBuildings函数。界面进入Processing页左侧列表滚动展示每栋建筑的 ID、高度标签和轮廓坐标Processing.tsxHeight: 45→ 建筑有明确高度标签Height: No height info→ 无高度数据渲染时会按默认高度处理。 若选区过大页面会弹出 The area is too big 提示建议选一个街区级别的范围加载更快、模型也更精细。确认数据无误后再次点击 Next Step进入 3D 场景。步骤 3查看与交互 3D 城市3D 场景由 Space.tsx 渲染几个实用交互旋转/缩放默认轨道相机拖拽旋转、滚轮缩放悬停建筑体块变蓝弹出信息卡片显示名称、高度m、楼层数、设施类型与完整地址Space.tsx点击建筑锁定选中状态方便持续查看属性Car Mode点击顶部导航的Car Mode切换第一人称车辆视角Car.tsx按W/A/S/D前进转向鼠标控制朝向Esc退出。建筑高度的换算规则值得一看优先使用height标签没有则用building:levels × 2.2 米两者都缺失时默认 10 米Space.tsx。步骤 4一键导出 GLB在 3D 页面点击右下角Export GLB弹出确认框后选择GLB Download场景遍历所有标记了exportToGLB的对象建筑 道路用 Three.js 的GLTFExporter打包为二进制 GLBSpace.tsx浏览器自动下载scene.glbMIME 类型为model/gltf-binary导出动作的状态由 exportStore.ts 管理方便未来扩展上传到云空间等模式。导出的 GLB 可以直接拖进 Blender、Godot或用 three.js / Babylon.js 加载到 Web 页面里做数字孪生展示。四、常见问题问题解决办法建筑高度看起来不对OSM 中部分建筑缺height标签属于数据源限制未来版本将支持手动修正加载很慢或超时缩小选区Overpass 查询设置了 25 秒超时App.tsx导出的 GLB 里没有天幕和灯光属正常现象只有建筑和道路参与导出灯光/天空是运行时渲染内容五、项目结构与路线图选区组件src/components/map/SelectMap.tsx流程编排src/ui/App.tsx3D 渲染与导出src/three/Space.tsx全局状态src/state/areaStore / carStore / exportStore根据 README.md 的路线图建筑纹理、高度自定义、材质切换、Heightmap均在计划之中。项目采用 MIT 协议全部功能免费使用——选个街区4 步走完你的第一座城市 GLB 模型就已经躺在下载目录里了 【免费下载链接】map3d️ Generate City 3D map with R3F. Include building and road information.项目地址: https://gitcode.com/gh_mirrors/map/map3d创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考