Cesium中简单的LOD动态加载大量三维模型

Cesium中提供了三维模型加载API,但是很显然一般三维场景的模型成千上万,如果单纯采用默认的三维模型加载方案会出现浏览器吃不消致使崩溃或者高延迟低帧率等影响正常可视化交互的问题。诚然官方团队已经开始了一个号称革新技术的3Dtiles的三维模型批量加载处理方案,但目前其一直还在开发中,而且也还没有看到一个数据处理项目,当然github上的相关分支中也能看到运行不错的例子了。从一个公司或者一个团队自己的应用开发角度出发,能够拥有自己可以控制的三维模型加载方式的好处是不言而喻的,一方面可以很好的做到业务流程的控制,另方面显然的对自己的业务数据也有一定的保密作用。3Dtile的实施方法其实就是为批量模型加载添加一个快速索引和数据集的整体性描述,从而减少渲染循环中需要处理的实体数据量,最终实现三维模型加载效率的提升。

在最近闲暇时完成了简单的LOD动态加载大量三维模型核心代码扩展。目前单纯采用的是R树索引,支持动态数据的加入和剔除,可配置为无缓存和缓存两种模式,无缓存模式是动态调度数据并剔除视野范围内的数据的,这样的好处是减低Cesium在加载范围三维模型时的资源消耗,当然这样数据资源的释放会增加网络负担和因为数据加载带来的数据延迟;为了能更好的节省网络开销和一定程度上提高数据的交互能力,本扩展也支持缓存模式,即数据一经加载其所占资源并不释放而只控制其数据的渲染与否。效果如下面几图展示。


这些图片截自于个人录制的LOD展示视频,实验数据是从某位朋友那里拿到的费城区域部分数据,大约有430+的模型,懒得上传到视频网上了,这里给一个百度网盘地址,有兴趣可以下载下来看下:http://pan.baidu.com/s/1boijkwn 当然也可以加入Cesium交流群:115883691里面的群共享文件中也有。如有兴趣或者相关疑问欢迎加我QQ491453302或者关注我的微博:Web3DGIS 可了解个人和团队相关研究进展


注意:很多朋友看了这个博客 以为我用的3DTiles  但是如果对Cesium 3DTiles技术比较清楚的朋友应该知道 这个博客发表时 Cesium官网虽然公开讨论过3DTiles但相关的工具是没有的 这个是我自己定义的加载机制   同理通过自定义的加载机制 我也成功流畅的加载了倾斜摄影测量三维模型(希望有时间能把这个整理下也发表个博文吧)


本人长期承接三维GIS可视化项目,提供3DTiles/大范围Gltf数据处理与加工服务


  • 11
    点赞
  • 52
    收藏
    觉得还不错? 一键收藏
  • 15
    评论
### 回答1: Cesium 提供了一个功能强大的 JavaScript 库,可以让您轻松地加载、显示和交互式地管理三维模型。您可以使用 Cesium 的 API 来加载三维模型,并使用 Cesium 提供的功能来控制和管理模型。 ### 回答2: Cesium是一个用于构建三维地理信息应用程序的开源JavaScript库。它提供了加载和显示三维模型的功能,下面是使用Cesium加载三维模型的步骤: 1. 下载和引入Cesium库:首先,你需要从Cesium官方网站上下载Cesium库,并将其引入你的HTML页面。你可以使用以下代码将Cesium库引入到你的页面: ```html <script src="path-to-cesium/Cesium.js"></script> <link rel="stylesheet" href="path-to-cesium/Cesium.css"> ``` 2. 创建一个Cesium Viewer对象:接下来,你需要创建一个Cesium Viewer对象,用于加载和显示三维模型。你可以使用以下代码创建一个Cesium Viewer对象: ```javascript var viewer = new Cesium.Viewer('cesiumContainer'); ``` 其,'cesiumContainer'是一个div元素的ID,用于作为渲染三维场景的容器。 3. 加载三维模型:你可以使用`viewer`对象的`entities`属性来加载三维模型。通过创建一个`Entity`对象,并在其指定模型的URL,然后将该对象添加到`viewer`的`entities`属性,即可加载三维模型。示例代码如下: ```javascript var position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height); var modelUrl = 'path-to-model/model.glb'; var entity = viewer.entities.add({ position: position, model: { uri: modelUrl, }, }); ``` 其,`longitude`、`latitude`和`height`是模型的位置信息,`path-to-model/model.glb`是模型文件的URL。 4. 控制三维模型的显示属性:你可以使用`Entity`对象的其他属性来控制三维模型的显示属性,例如设置模型的旋转角度、缩放比例、颜色等。 以上就是使用Cesium加载三维模型的基本步骤。通过按照以上步骤操作,你可以将自定义的三维模型加载Cesium的场景,并通过控制属性来调整模型的显示效果。 ### 回答3: 在Cesium加载三维模型可以通过以下步骤完成: 1. 准备模型:首先,需要准备一个支持的三维模型文件,如COLLADA(.dae)、glTF(.gltf/.glb)或3D Tiles(.json)。可以通过第三方建模软件或在线模型库获取模型文件。 2. 引入Cesium库:在HTML文件引入Cesium库,可以通过使用Cesium的CDN或者下载库文件到本地引入。 3. 创建场景:使用Cesium的Viewer对象创建一个场景,指定场景的容器元素,例如一个div元素。 4. 加载模型:使用Cesium的Model类加载三维模型文件。可以通过Model.fromGltf、Model.fromGltfUrl或Model.fromGltfResource等方法来加载模型文件。通过指定模型文件的URL或资源对象来加载模型文件。加载成功后,模型会自动添加到场景,并根据需要进行位置、旋转和缩放等调整。 以下是一个简单的示例,加载一个COLLADA模型文件: ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Load 3D Model in Cesium</title> <style> #cesiumContainer { width: 100%; height: 600px; } </style> <script src="https://cesium.com/downloads/cesiumjs/releases/1.87/Build/Cesium/Cesium.js"></script> </head> <body> <div id="cesiumContainer"></div> <script> // 创建场景 var viewer = new Cesium.Viewer("cesiumContainer"); // 加载模型 var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({ url: "path/to/your/model.dae" })); // 调整模型位置、缩放、旋转等 model.scale = 0.5; model.rotation.x = Cesium.Math.toRadians(90); // 其他调整... // 重渲染场景 viewer.scene.requestRender(); </script> </body> </html> ``` 需要注意的是,加载较大的模型文件可能会导致加载时间较长或浏览器卡顿,可以提前进行模型优化或使用Cesium的量级切片(3D Tiles)进行加载以提高性能。
评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值