map3d GLB 导出机制深度解析GLTFExporter 如何将 3D 城市场景打包为可移植模型【免费下载链接】map3d️ Generate City 3D map with R3F. Include building and road information.项目地址: https://gitcode.com/gh_mirrors/map/map3dmap3d 是一款基于 React Three FiberR3F的 3D 城市场景生成工具它把 OpenStreetMap 的建筑与道路数据变成可漫游的 3D 城市并支持一键 GLB 导出。本文将深度解析 map3d 的 GLB 导出机制带你弄清楚 GLTFExporter 是如何把整个 3D 城市场景打包成一个可移植的标准 3D 模型文件的 。一图看懂GLB 导出的完整流水线map3d 的导出流程并不复杂可以概括为标记 → 收集 → 打包 → 下载四步步骤做什么关键位置① 标记给建筑、道路对象打上exportToGLB标记Space.tsx② 收集遍历场景把带标记的对象克隆进一个新GroupSpace.tsx③ 打包GLTFExporter 以二进制模式解析场景生成 GLB 字节流Space.tsx④ 下载字节流封装为 Blob触发浏览器保存scene.glbSpace.tsx下面逐步拆解每个环节的设计思路。第一步用 userData 标记谁可以导出3D 场景里并不是所有内容都需要进 GLB 文件——相机控制、小车模型、天空盒Sky、环境光照等都属于运行时道具导出去反而污染模型。map3d 的解法非常轻量在创建建筑网格和道路线条时直接给它们的userData写入一个布尔标记建筑userData{{ exportToGLB: true }}见 Building 组件道路userData{{ exportToGLB: true }}见 Roads 组件 这种数据标记 统一遍历的模式比维护一份对象清单更省心以后新增任何城市元素只要打上标记就会自动进入导出范围。而场景中未被标记的对象比如可驾驶的 Car 小车会被自然排除这正是导出结果干净的原因。第二步遍历场景构建干净的导出根节点当用户在 App.tsx 点击右下角的Export GLB按钮后事件并不会直接执行导出而是通过 exportStore 把action置为true——这是一种典型的UI 层发信号、3D 层消费信号的解耦写法UI 在 React 层而场景对象只能在 R3F 的 Canvas 内访问。负责消费的Export组件监听这个状态一旦为true就执行 exportGLB。它的第一件事是搬家新建一个空 Group(exportRoot) → 遍历整个 scene 的每一个子节点 → 凡是 userData.exportToGLB true 的对象clone(true) 后放入 exportRoot为什么克隆而不直接导出原场景两个好处隔离性GLTFExporter 会读取对象的变换、几何、材质克隆体与原场景互不干扰避免导出过程中场景仍在渲染更新纯净结构导出根节点下只有建筑和道路层级简单GLB 文件打开后就是城市本体没有多余的空节点和灯光。第三步GLTFExporter 二进制打包一个文件装下整个城市打包环节使用的是 three.js 官方自带的GLTFExporter从three/examples/jsm/Addons.js引入见 Space.tsx调用时只传了两个关键选项binary: true—— 输出GLBGLTF Binary而非.gltf 一堆外部资源文件。GLB 把 JSON 描述、几何数据、贴图全部内嵌进单个二进制容器天然适合分享与上传embedImages: true—— 若材质涉及图片则直接嵌入文件保证模型单文件即完整。exporter.parse()是异步的回调中 map3d 先做了一个类型校验只有当结果确实是ArrayBuffer二进制字节流时才继续否则记录错误日志。这行防御性判断保证了即便 exporter 行为变化前端也不会把 JSON 字符串误当成 GLB 保存下来。 顺带科普GLB 是 Khronos 组织 3D 模型通用标准 GLTF 的二进制封装Blender、Unity、Unreal、在线 3D 查看器等工具都能直接打开。这也是 README 中说基于此项目可实现数字孪生、无人机测绘、GPS 标记的基础——GLB 是 3D 界的通用格式。第四步Blob 触发下载或直传 Fleet 空间拿到字节流后map3d 将其封装为BlobMIME 类型设为model/gltf-binary然后按 exportType 分流glb默认创建一个隐藏的a标签href指向URL.createObjectURL(blob)生成的对象 URLdownload属性命名为scene.glb模拟一次点击完成下载随后移除标签。零依赖、无后端参与纯前端完成fleet把同一个 Blob 以multipart/form-data上传到 Fleet 平台的space/file/mesh接口作为box3d.glb存入指定空间供车队场景直接使用见 uploadFleet。导出的场景是怎么长出来的理解导出机制前先快速看一眼被导出的场景本身这样能解释 GLB 里到底装了什么建筑从 Overpass 拉取building标签的多边形投影为平面Shape按height或building:levels × 2.2拉伸成ExtrudeGeometry无高度信息时默认 10 米见 areaData道路拉取highway数据绘制绿色线条同样带导出标记坐标缩放经纬度以场景中心为原点、按scale 51000折算成米制坐标保证导出模型的比例可用。也就是说你下载到的scene.glb≈ 一片真实城市的建筑体块 路网可以直接拖进 Blender 或任意 3D 查看器查看。相关文件索引文件作用src/three/Space.tsx场景构建 Export组件 GLB 打包核心逻辑src/state/exportStore.ts导出动作信号与导出类型glb / fleet状态src/ui/App.tsx导出按钮、导出弹窗与步骤流src/state/areaStore.ts建筑数据与选区中心存储README.md项目说明、Roadmap 与数据准确性提示小结map3d 的 GLB 导出机制看似只有几十行代码却展示了Web 端 3D 场景导出的完整最佳实践用userData标记导出范围按需裁剪场景克隆到独立Group保证导出结构与原场景解耦GLTFExporterbinary: true一个文件装下整座城市Blob 对象 URL纯前端零依赖下载。如果你也在做 R3F 项目并需要把用户搭好的场景导出成模型这套标记 → 收集 → 打包 → 下载的套路几乎可以原样复用 。【免费下载链接】map3d️ Generate City 3D map with R3F. Include building and road information.项目地址: https://gitcode.com/gh_mirrors/map/map3d创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考