Threebox 实战指南Mapbox 地图加 3D 动画【免费下载链接】threeboxA Three.js plugin for Mapbox GL JS, with support for animations and advanced 3D rendering.项目地址: https://gitcode.com/gh_mirrors/thr/threebox想在地图坐标上钉一颗真实的 3D 卫星天线或者让一个小兵在地图上跑起来自己在 Mapbox GL JS 里写 custom layer、再让 Three.js 场景跟地图坐标系同步是件很烦的事。Threebox 是一个面向 Mapbox GL JS 的 Three.js 插件把 3D 模型、动画和 extrusion 直接挂到地图上几行代码就能让你的 2D 地图页面立起来。项目定位Threebox 是什么Threebox 是基于 Three.js CustomLayerInterface 的 Mapbox GL JS 插件负责把 lnglat 坐标和 3D 场景相机与地图同步。内置 sphere、line、tube、label 等几何对象自带 GLTF / OBJ / FBX / Collada 模型加载器模型可直接 playAnimation 播放内置动画setSunlight 按日期模拟太阳方向光与阴影对象可用鼠标选中、拖动、旋转五分钟上手跑通第一个 Threebox 示例git clone https://gitcode.com/gh_mirrors/thr/threebox cd threebox npm install—— 拉代码并装依赖。cp examples/config_template.js examples/config.js然后把你的 Mapbox accessToken 填进文件的 accessToken 字段。npm run build—— 生成 dist/threebox.js所有示例页面加载的就是它。npm start—— 在 8080 端口起静态服务器浏览器打开http://localhost:8080/examples/01-basic.html。此时浏览器中会出现一个红色 3D 球体悬浮在地图原点上空鼠标悬停可以选中它。原理很简单在地图里注册一个 custom layeronAdd 里写new Threebox(map, gl)render 里调用tb.update()3D 场景就会跟着地图走。完整模板和更多例子见仓库 examples/ 目录。能力拆解三个真实任务场景把 3D 模型贴到地图坐标上你手上有一个 GLB 模型卫星天线、埃菲尔铁塔、车辆想让它精确落在某个经纬度上。let options { type: gltf, obj: ./models/radar/34M_17.glb, // 模型路径 units: meters, scale: 333.22, rotation: { x: 90, y: 180, z: 0 } }; tb.loadObj(options, (model) { model.setCoords([-122.4340, 37.7353, 5]); // 经度, 纬度, 高度 tb.add(model); });跑完之后卫星天线就出现在指定坐标上悬停还能显示 tooltip把model.castShadow true打开它会在地面投出真实阴影。模型摆好之后下一步通常是让它动起来——播放模型自带的动画士兵、风车、车辆这类 GLB 里往往自带动画片段Threebox 一行就能放出来。// soldier 是 loadObj 回调里拿到并已 tb.add 的对象 soldier.playAnimation({ animation: 1, duration: 10000 });跑完之后站在原地的士兵开始做跑动动作播放模型中的第 1 段动画、持续 10 秒不用自己写关键帧。静态模型还不够的话还可以直接从地理数据里长出 3D——把 2D 面数据拉成 3D 体extrusion你有一批 GeoJSON 里的建筑轮廓想按数据把它们挤成体块。let extrusion tb.extrusion({ coordinates: b.geometry.coordinates, geometryOptions: { depth: 100, curveSegments: 1, bevelEnabled: false }, materials: redMaterial // 任意 THREE 材质 }); extrusion.setCoords([center[0], center[1], 0]); tb.add(extrusion);跑完之后平面的轮廓变成有高度的立体块再调用extrusion.addTooltip(text, true)悬停就能看到对应建筑的信息。避坑备忘这些坑先记住模型位置偏了先检查 setCoords([lng, lat, h]) 经纬度顺序别写反浏览器里看不到 3D、404忘了 build先跑一次npm run build控制台报 Config not set把 config_template.js 复制成 config.js 再填 token模型忽大忽小核对 scale 和 unitsunits 默认单位是米阴影没出来设 model.castShadow true再把灯光 target 指到模型上资源导航下一步看什么API 文档docs/Threebox.md20 可运行示例examples/插件核心源码src/Threebox.js现在可以打开仓库把第一个示例跑起来了。【免费下载链接】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），仅供参考