mapbox-gl中集成three.js參見公眾號文章：mapbox-gl集成three.js開發(fā)官方示例中，mapbox-gl集成three.js，是將three.js加載的對象放置在設(shè)置的參考坐標(biāo)中心點，在開發(fā)過程中，有時需要在three.js，依據(jù)不同位置，放置多個模型對象，或者其他three.js對象，這就需要計算每個對象的位置信息了。

mapbox-gl基礎(chǔ)操作坐標(biāo)是經(jīng)緯度，three.js中常用的坐標(biāo)設(shè)置單位是米，所以，根據(jù)每個模型對象的實際位置（經(jīng)緯度），要進(jìn)行一步轉(zhuǎn)換，計算出模型距離設(shè)置的中心點的坐標(biāo)位置（米），有兩種方式：

一是：將經(jīng)緯度坐標(biāo)轉(zhuǎn)換成web墨卡托坐標(biāo)進(jìn)行計算，參見mapbox-gl中的web墨卡托轉(zhuǎn)換，計算出模型的實際位置多少米；

二是：使用turf.js類庫，參見mapbox-gl+turf.js簡單箭頭畫法，計算距離和實際位置的經(jīng)緯度。

按照坐標(biāo)系轉(zhuǎn)換的概念，是需要將一個坐標(biāo)系中的坐標(biāo)，向另一個坐標(biāo)系中的坐標(biāo)轉(zhuǎn)換，也可以采取矩陣的方式，這個有興趣的可以試一下。

three.js默認(rèn)坐標(biāo)軸是Y向上的，mapbox-gl中默認(rèn)是Z向上，這個在示例中已經(jīng)進(jìn)行了轉(zhuǎn)換。
簡單的模型加載效果：

https://mp.weixin.qq.com/s?__biz=MzU2ODYzNzc4OQ==&mid=2247485655&idx=1&sn=191b6ade6b11d301c38c13877d3d30d4&chksm=fc8ba8e5cbfc21f30ffac0c141144ab0687a3f2f212a16b9f9ee5211acd3ac8a36ebeb9789cd&token=600516805&lang=zh_CN#rd