Threebox 如何给 2D 地图加上真实 3D 对象3 分钟上手的完整指南【免费下载链接】threeboxA Three.js plugin for Mapbox GL JS, with support for animations and advanced 3D rendering.项目地址: https://gitcode.com/gh_mirrors/thr/threeboxMapbox GL JS 原生只画平面矢量图层你想把卫星天线、行走的士兵这类实体放进地图时就得自己搭一套三维管线。Threebox 是 Three.js 的 Mapbox GL JS 插件它在地图的 custom 图层里接管渲染把经纬度坐标换算成场景坐标并同步两套相机你只管用tb.sphere()、tb.loadObj()这类接口往地图上丢 3D 对象。适合已经使用 Mapbox GL JS、想快速做出 3D 地图应用但又不想手写相机同步和坐标转换的开发者。3 步跑通本地 Threebox 3D 地图环境第一步拿到代码并装依赖git clone https://gitcode.com/gh_mirrors/thr/threebox cd threebox npm install第二步复制配置模板examples/config_template.js为examples/config.js把 Mapbox access token 填进去。没有这一步所有示例页面都会在控制台报 Config not set。第三步npm run start启动本地服务端口 8080打开examples/01-basic.html地图中央会落一个红色 3D 球体鼠标悬停还能触发 hover 事件核心就 4 行window.tb new Threebox(map, mbxContext, { defaultLights: true }); var sphere tb.sphere({ color: red, material: MeshToonMaterial }); sphere.setCoords([-122.4340, 37.7353, 1]); tb.add(sphere);装载 GLB 模型把卫星天线钉在地图上 效果一个真实尺寸的天线模型NASA 的 34M_17.glb立在地图上可点击选中、显示提示框还能拖动时间轴改变太阳位置看阴影变化。关键是loadObj的units、scale、rotation、anchor四个参数决定了模型落地是否准确const options { obj: ./models/radar/34M_17.glb, type: gltf, units: meters, scale: 333.22, rotation: { x: 90, y: 180, z: 0 }, anchor: center }; const model await tb.loadObj(options); model.setCoords([148.9819, -35.39847]); tb.add(model);模型放在examples/models/下含地标eiffel.glb、spaceneedle.glb、车辆car.glb、truck.glb、人物等可直接拿来替换。让士兵沿路径行走内置动画怎么驱动效果地图上出现一个 Mixamo 士兵模型点一下地图他播放走路动画、沿寻路 API 返回的坐标序列走完全程身后拖一条蓝色路线。模型自带动画轨道用playAnimation播放路径跟随用followPath两条指令叠加就是边走边动soldier.followPath({ path: data.routes[0].geometry.coordinates, duration: 10000, trackHeading: true // 自动朝向行进方向 }); soldier.playAnimation({ animation: 1, duration: 10000 }); const line tb.line({ geometry: path, width: 5, color: steelblue }); tb.add(line);动画调度逻辑在src/animation/AnimationManager.js对象位置、旋转、缩放的补间和路径缓动都走同一个队列。几何挤出GeoJSON 轮廓直接长成 3D 立体 ⭐效果把 GeoJSON 里的多边形轮廓当二维形状用 THREE 的挤出参数生成带倒角的立体建筑物——示例页面里一颗旋转的立体五角星和几栋按轮廓挤出的楼块就立在那里。tb.extrusion接收轮廓点、挤出深度和材质再setCoords定位const star tb.extrusion({ coordinates: points, // GeoJSON 轮廓点 geometryOptions: { depth: 20, bevelEnabled: true, bevelThickness: 2 }, materials: [mat1, mat2], rotation: { x: 90, y: 0, z: 20 } }); star.setCoords(origin); tb.add(star);注意它和 Mapbox 的 fill-extrusion 图层是两回事前者是真实三维网格能做旋转、碰撞拾取和 tooltip。高频问题排查现象排查方向页面不渲染控制台报 Config not setexamples/config.js没建或 token 为空按 config_template.js 补上模型请求 404控制台有 MIME 相关报错.glb不是标准 MIME 类型需在服务器配置里补一条model/gltf-binary项目自带 server.js 已配好模型偏位、倒置或比例异常依次检查units与scale是否匹配真实尺寸、anchor取 center 还是 bottom、rotation是否给了正确的轴向继续深入完整文档docs/Threebox.md20 个可运行示例examples/目录内 README.md 有逐例说明核心实现src/Threebox.js对象管理、光照、拾取、拖拽全在这里动画系统src/animation/AnimationManager.js单元测试tests/unit/【免费下载链接】threeboxA Three.js plugin for Mapbox GL JS, with support for animations and advanced 3D rendering.项目地址: https://gitcode.com/gh_mirrors/thr/threebox创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Threebox 如何给 2D 地图加上真实 3D 对象？3 分钟上手的完整指南
Threebox 如何给 2D 地图加上真实 3D 对象3 分钟上手的完整指南【免费下载链接】threeboxA Three.js plugin for Mapbox GL JS, with support for animations and advanced 3D rendering.项目地址: https://gitcode.com/gh_mirrors/thr/threeboxMapbox GL JS 原生只画平面矢量图层你想把卫星天线、行走的士兵这类实体放进地图时就得自己搭一套三维管线。Threebox 是 Three.js 的 Mapbox GL JS 插件它在地图的 custom 图层里接管渲染把经纬度坐标换算成场景坐标并同步两套相机你只管用tb.sphere()、tb.loadObj()这类接口往地图上丢 3D 对象。适合已经使用 Mapbox GL JS、想快速做出 3D 地图应用但又不想手写相机同步和坐标转换的开发者。3 步跑通本地 Threebox 3D 地图环境第一步拿到代码并装依赖git clone https://gitcode.com/gh_mirrors/thr/threebox cd threebox npm install第二步复制配置模板examples/config_template.js为examples/config.js把 Mapbox access token 填进去。没有这一步所有示例页面都会在控制台报 Config not set。第三步npm run start启动本地服务端口 8080打开examples/01-basic.html地图中央会落一个红色 3D 球体鼠标悬停还能触发 hover 事件核心就 4 行window.tb new Threebox(map, mbxContext, { defaultLights: true }); var sphere tb.sphere({ color: red, material: MeshToonMaterial }); sphere.setCoords([-122.4340, 37.7353, 1]); tb.add(sphere);装载 GLB 模型把卫星天线钉在地图上 效果一个真实尺寸的天线模型NASA 的 34M_17.glb立在地图上可点击选中、显示提示框还能拖动时间轴改变太阳位置看阴影变化。关键是loadObj的units、scale、rotation、anchor四个参数决定了模型落地是否准确const options { obj: ./models/radar/34M_17.glb, type: gltf, units: meters, scale: 333.22, rotation: { x: 90, y: 180, z: 0 }, anchor: center }; const model await tb.loadObj(options); model.setCoords([148.9819, -35.39847]); tb.add(model);模型放在examples/models/下含地标eiffel.glb、spaceneedle.glb、车辆car.glb、truck.glb、人物等可直接拿来替换。让士兵沿路径行走内置动画怎么驱动效果地图上出现一个 Mixamo 士兵模型点一下地图他播放走路动画、沿寻路 API 返回的坐标序列走完全程身后拖一条蓝色路线。模型自带动画轨道用playAnimation播放路径跟随用followPath两条指令叠加就是边走边动soldier.followPath({ path: data.routes[0].geometry.coordinates, duration: 10000, trackHeading: true // 自动朝向行进方向 }); soldier.playAnimation({ animation: 1, duration: 10000 }); const line tb.line({ geometry: path, width: 5, color: steelblue }); tb.add(line);动画调度逻辑在src/animation/AnimationManager.js对象位置、旋转、缩放的补间和路径缓动都走同一个队列。几何挤出GeoJSON 轮廓直接长成 3D 立体 ⭐效果把 GeoJSON 里的多边形轮廓当二维形状用 THREE 的挤出参数生成带倒角的立体建筑物——示例页面里一颗旋转的立体五角星和几栋按轮廓挤出的楼块就立在那里。tb.extrusion接收轮廓点、挤出深度和材质再setCoords定位const star tb.extrusion({ coordinates: points, // GeoJSON 轮廓点 geometryOptions: { depth: 20, bevelEnabled: true, bevelThickness: 2 }, materials: [mat1, mat2], rotation: { x: 90, y: 0, z: 20 } }); star.setCoords(origin); tb.add(star);注意它和 Mapbox 的 fill-extrusion 图层是两回事前者是真实三维网格能做旋转、碰撞拾取和 tooltip。高频问题排查现象排查方向页面不渲染控制台报 Config not setexamples/config.js没建或 token 为空按 config_template.js 补上模型请求 404控制台有 MIME 相关报错.glb不是标准 MIME 类型需在服务器配置里补一条model/gltf-binary项目自带 server.js 已配好模型偏位、倒置或比例异常依次检查units与scale是否匹配真实尺寸、anchor取 center 还是 bottom、rotation是否给了正确的轴向继续深入完整文档docs/Threebox.md20 个可运行示例examples/目录内 README.md 有逐例说明核心实现src/Threebox.js对象管理、光照、拾取、拖拽全在这里动画系统src/animation/AnimationManager.js单元测试tests/unit/【免费下载链接】threeboxA Three.js plugin for Mapbox GL JS, with support for animations and advanced 3D rendering.项目地址: https://gitcode.com/gh_mirrors/thr/threebox创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考