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