Cesium從入門到放棄6：模型加載

前言

Cesium支持的模型有兩種：一是gltf/glb，二是3dtileset，其它格式的模型需要轉換成這兩種格式才能在Cesium上添加，通常來說大數據的模型一般使用3dtileset，因爲它是做了LOD在gltf，性能更好。

0.兩種方法對比

• entity對位置和方向的控制更加簡單，primitive要通過矩控制模型的位置和方向。
• primitive更接近webGL底層，性能遠高於entity（添加不同數量的Primitive和Entity，觀察幀率和延遲的變化
• 如果模型數據量小且不需要複雜的幾何變換，用Entity
• 如果模型數據量大或要對模型作複雜的矩陣變換，用primitive方式

1 gltf模型加載

1.1 Entity方式加載

const viewer=new Cesium.Viewer('map')
const model=viewer.entities.add({
      position:Cesium.Cartesian3.fromDegrees(110,40),
      model:{
        uri:'static/Wood_Tower.gltf'
    }
})
viewer.flyTo(model)

1.2 Primitive加載

const viewer=new Cesium.Viewer('map')
const center=new Cesium.Cartesian3.fromDegrees(110,40)
const matrix=Cesium.Transforms.eastNorthUpToFixedFrame(center)
viewer.scene.primitives.add(
      Cesium.Model.fromGltf({
        url:'static/Wood_Tower.gltf',
        modelMatrix:matrix
      })
).readyPromise.then(e=>{
  viewer.camera.lookAtTransform(temp2,new Cesium.Cartesian3(-100,0,1000))
}).otherwise(e=>{
  console.log(e)
})

很多人使用Primitive的難點在於不知道怎麼構造modelMatrix，最簡單的就是使用Cesium.Transforms.eastNorthUpToFixedFrame接口，至於複雜的姿態調整就是下篇文章的內容了。

2. dtileset加載

2.1 Entity加載

Entity接口說明可以添加tileset，但是我在1.66版本下測試沒有成功，並且Cesium.Cesium3DTilesetGraphics是undefined，不知道是不是被移除了，總之不建議使用Entity方法加載tileset模型

2.2 Primitive加載

const center=new Cesium.Cartesian3.fromDegrees(110,40)
const matrix=Cesium.Transforms.eastNorthUpToFixedFrame(center)
viewer.scene.primitives.add(
   new Cesium.Cesium3DTileset({url:'http://192.168.43.157:8088/單體化0/tileset.json'})
).readyPromise.then(e=>{
   viewer.flyTo(e)
}).otherwise(e=>{
  console.log(e)
})

寫了一個爬取網絡上3dtileset模型的工具（get-3dtileset），感興趣的給個star。

建了一個Cesium交流羣，歡迎大家來交流。
羣號:107615960