cesium首次加载gltf模型成功

150 篇文章 1 订阅

接此;

https://blog.csdn.net/bcbobo21cn/article/details/111305160

 

根据资料gltf格式模型可以直接在cesium上加载;

网上搜索gltf,下载一个模型来看一下;

下来看一下是后缀名为skp,试一下加载;

代码如下;

<script>

var viewer = new Cesium.Viewer("cesiumContainer");


var entity = viewer.entities.add({  
    position : Cesium.Cartesian3.fromDegrees(114.33,30.35),  
    model : {  
        uri : 'ff1.skp'  
    }  
});  
viewer.trackedEntity = entity;
</script>

没有;只有此地的底图; 

然后下一个后缀为gltf的文件看下;
 

<script>

var viewer = new Cesium.Viewer("cesiumContainer");


var entity = viewer.entities.add({  
    position : Cesium.Cartesian3.fromDegrees(114.33,30.35),  
    model : {  
        uri : './policecar/scene.gltf'  
    }  
});  
viewer.trackedEntity = entity;
</script>

看一下有了;直接定位过去,模型出来; 

 

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Cesium是一个用于构建地球浏览应用的JavaScript库。它能够加载和渲染各种类型的3D模型,包括gltf模型。 要在Cesium加载gltf模型,首先需要引入Cesium库文件。可以使用<script>标签将cesium.js导入到HTML文件中。 接下来,在JavaScript代码中使用Cesium的Viewer对象创建一个视图器,用于显示地球场景。可以通过指定一个HTML元素的id来指定视图器的容器。例如,可以使用以下代码创建一个视图器: var viewer = new Cesium.Viewer('cesiumContainer'); 这里的'cesiumContainer'是要显示场景的HTML元素的id。 然后,可以使用Cesium的Entity对象创建一个实体,该实体可以包含gltf模型的位置、方向和缩放信息。可以使用以下代码创建一个实体: var modelEntity = viewer.entities.add({ name: 'gltfModel', position: Cesium.Cartesian3.fromDegrees(longitude, latitude, height), orientation: Cesium.Quaternion.fromAxisAngle(Cesium.Cartesian3.UNIT_Z, Cesium.Math.toRadians(rotation)), model: { uri: 'path/to/model.gltf' } }); 这里的longitude、latitude和height是模型在地球上的位置,rotation是模型的初始方向角度。 最后,调用Cesium的Viewer对象的render函数来渲染场景。可以将此函数放在循环中,以便持续渲染场景。 viewer.render(); 通过以上步骤,就可以在Cesium成功加载并显示一个gltf模型了。您可以根据需要调整模型的位置、方向、缩放等属性,以实现更多的效果和交互。另外,Cesium还提供了许多其他功能和API,可以用于对模型进行更高级的操作和处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值