在这里记录一下之前遇到的 threejs 融合 webgis 场景遇到的问题： 问题：需要在 mapbox 地图中按提供的经纬度信息添加带着色器材质的动态特效 首先 要实现在 mapbox 与 threejs 融合展示，目前个人实践来说

在进行 webgis 和 webgl 项目开发中，涉及到动态可视化效果时，着色器材质是一个常用的方案，除此之外就是使用一些第三方库在地图上层再添加一个 webgl 图层，但是这种方案太重，且不同的图层所在大面不在一面，所以叠加顺序遮盖可能不

最近在项目中实现了基于 websocket 数据的 threejs 车流孪生展示，其中有几个问题及其思路在这里记录一下 websocket 数据是实时推送的，且帧数不超过1秒30帧，肉眼可见的卡顿，所以必然需要补帧 既然需要补帧那就只有两个

最近项目中有遇到根据实时推送数据展示轨迹的需求，并且需要加载gltf、glb此类3D模型作为车辆点，所以在此需要结合threejs
但是若使用原生threejs的话结合地图开发不太友好，所以使用threebox作为桥梁可以减少很多心智负担。在这里做个小demo记录一下

---

1. 引入所需的 js 库

   1 2 3 4 5 6 7 8

   // mapboxgl <script type="text/javascript" src="xxx/mapbox-gl.js"></script> <link rel="stylesheet" type="text/css" href="xxx/mapbox-gl.css"/> // threebox <script type="text/javascript" src="xxx/threebox/threebox.js"></script> <link rel="stylesheet" type="text/css" href="xxx/threebox/threebox.css" /> // turf <script type="text/javascript" src="./turf/turf.min.js"></script>