前言

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.Cesium3DTilesetGraphicsundefined,不知道是不是被移除了,总之不建议使用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

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐