Cesium 加载实景三维模型 优化建议

关于通过谷歌浏览器通过Cesium底层添加实景三维都会存在,谷歌浏览器内存回收机制,这个问题官方一直没有解决了。我可以根据一些参数进行调整一下,我这套方案,本人亲测有效,加载模型速度快,而且当你相机视角达到某个高度的时候或者移走的时候,他会自动回收,一点不占内存

建议用异步方式和设置一些官方参数加载模型:

 var tileset = new Cesium.Cesium3DTileset({
        url:url,
        skipLevelOfDetail: true,
        baseScreenSpaceError: 1024,
        maximumScreenSpaceError: 256, // 数值加大,能让最终成像变模糊
        skipScreenSpaceErrorFactor: 16,
        skipLevels: 1,
        immediatelyLoadDesiredLevelOfDetail: false,
        loadSiblings: true, // 如果为true则不会在已加载完概况房屋后,自动从中心开始超清化房屋
        cullWithChildrenBounds: true,
        cullRequestsWhileMoving: true,
        cullRequestsWhileMovingMultiplier: 10, // 值越小能够更快的剔除
        preloadWhenHidden: true,
        preferLeaves: true,
        maximumMemoryUsage: 128, // 内存分配变小有利于倾斜摄影数据回收,提升性能体验
        progressiveResolutionHeightFraction: 0.5, // 数值偏于0能够让初始加载变得模糊
        dynamicScreenSpaceErrorDensity: 0.5, // 数值加大,能让周边加载变快
        dynamicScreenSpaceErrorFactor: 1, // 不知道起了什么作用没,反正放着吧先
        dynamicScreenSpaceError: true, // 根据测试,有了这个后,会在真正的全屏加载完之后才清晰化房屋
      });

      tileset.readyPromise.then(function (tileset) {
        //笛卡尔转换为弧度

        var cartographic = Cesium.Cartographic.fromCartesian(
          tileset.boundingSphere.center
        );
        var lng = Cesium.Math.toDegrees(cartographic.longitude); //使用经纬度和弧度的转换,将WGS84弧度坐标系转换到目标值,弧度转度
        var lat = Cesium.Math.toDegrees(cartographic.latitude);
        //计算中心点位置的地表坐标
        var surface = Cesium.Cartesian3.fromDegrees(lng, lat, 0);
        //偏移后的坐标
        var offset = Cesium.Cartesian3.fromDegrees(lng, lat, 5);
        var translation = Cesium.Cartesian3.subtract(
          offset,
          surface,
          new Cesium.Cartesian3()
        );
        tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
      });
      viewer.flyTo(tileset);
      window.viewer.scene.primitives.add(tileset);
    },

### 回答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)进行加载以提高性能。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小白学过的代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值