Cesium从入门到放弃6:模型加载
前方Cesium支持的模型有两种:一是gltf/glb,二是3dtileset,其它格式的模型需要转换成这两种格式才能在Cesium上添加,通常来说大数据的模型一般使用3dtileset,因为它是做了LOD在gltf,性能更好。...
·
前言
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
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献4条内容
所有评论(0)