Mapbox & ThreeJS 互动方法

TIP

由于ThreeJS使用透视相机和Mapbox相机机制以及参与的不同，在拖动地图的时候，会发现ThreeJS物体有偏移现象。下面三种形式同步ThreeJS相机的算法不同，会随着地图倾角的变化导致偏移程度不同。——以上解释纯属个人理解

Mapbox下使用ThreeJS有三种形式：

1. 自定义Mapbox custom图层，直接使用ThreeJS，参考官方示例（https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model/）

• 需要引入ThreeJS库
• 直接使用自定义图层实现，可以充分利用ThreeJS API
• 只适用3857坐标系
• 需要手工把经纬度转ThreeJS坐标点

2. 使用Threebox，参考官方示例（https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model-threebox/）

• 需要引入threebox库，ThreeJS已经被打包到threebox库中，不能灵活使用不同版本ThreeJS
• API简单易用
• 只适用3857坐标系

3. 使用超图iclient插件

• 需要引入ThreeJS库
• API简单
• 适用不同坐标系
• 非3857坐标系下，偏移现象非常显著

3D文件格式

推荐：GLB和GLTF格式

• OBJ格式
• GLB或GLTF格式
• FBX格式