您的位置:

Cesium 3DTileset详解

一、概述

Cesium是一个基于WebGL、JavaScript和HTML5的开源虚拟地球(virtual globe)框架。在Cesium中,3DTileset是一种通过使用3D Tiles规范所描述的3D数据的集合,从而描绘出3D场景。3DTilesets广泛应用于虚拟现实(VR)、增强现实(AR)、城市规划和空间数据可视化领域。

二、3DTileset的构成和优势

3DTileset结构是一个包含多个Tile的树结构,每个Tile都有其自己的网格(geometry)、纹理(texture)和属性(attributes)。在Cesium中,Tile主要是根据三维瓦片来描述的,某个位置的3DTileset被加载时,首先根据当前相机所在的位置和观察方向决定优先加载哪些瓦片。

Cesium的3DTileset优势在于其支持高效地渲染大规模模型,这个特性在需要加载较多的数据时将会非常有用。下面是一份使用3DTileset的JavaScript代码。这个场景包含一个3D水管系统,连接了西北大学的各个建筑之间的冷却塔:

//加载3DTileset
var viewer = new Cesium.Viewer("cesiumContainer");
var tileset = viewer.scene.primitives.add(
  new Cesium.Cesium3DTileset({
    url: "https://gltf.czlt.net/bimtest7/tileset.json",
  })
);
var center = Cesium.Cartesian3.fromDegrees(
  -87.7098,
  41.8683,
  200
);
viewer.camera.lookAt(center, new Cesium.Cartesian3(0, 0, 200));
viewer.camera.lookAtTransform(
  Cesium.Matrix4.IDENTITY
);

//按下鼠标左键时,惯性运动停止
var scene = viewer.scene;
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function () {
  scene.screenSpaceCameraController.enableRotate = false;
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
handler.setInputAction(function () {
  scene.screenSpaceCameraController.enableRotate = true;
}, Cesium.ScreenSpaceEventType.LEFT_UP);
handler.setInputAction(function () {
  scene.screenSpaceCameraController.enableRotate = true;
}, Cesium.ScreenSpaceEventType.RIGHT_UP);

三、3DTileset的数据来源

3D Tilesets支持从不同的地图源中读取数据。目前,Cesium支持的瓦片来源内置为官方的3D Tileset集合,“3D Tiles Sample Data”,其中包括百度地图的城市建筑、希望之城等数据集。用户也可以自行构建3DTileset,来展示自己的数据,比如分析遥感数据和地图数据来进行3D可视化呈现等。

四、3DTileset面临的挑战

随着3DTilesets的逐渐应用于大规模场景的3D可视化领域,构建高质量的3D Tilesets将成为数个完整的工作流程(workflows)的组合。而最大的挑战在于多源数据的整合和构建,包括摄影测量数据、激光雷达数据和GIS数据等,都需要先转换为3D Tilesets所需要的格式。因此,一个完整的工作流程至少包括以下部分:数据采集、数据存储、数据预处理、数据整合和3DTileset模型的构建等环节。

在开发3DTilesets过程中,另外一个更加严峻的挑战是提升数据可视化的速度和质量,以及对3D Tileset数据进行维护。具体而言,我们需要在保证数据保真性的前提下,进行数据的压缩和优化,以减少网络传输的时间和内存占用。同时,在数据展示过程中,较少几何模型的复杂度和计算负担,以提高可视化的帧率和交互体验。

Cesium 3DTileset详解

2023-05-18
cesiumjs详细教程(cesium开发教程)

本文目录一览: 1、Cesium在js中调用entity的infobox单机事件 2、Cesium初始化选项 3、Cesium随笔:视锥绘制(上) 4、cesium如何搭建dat.gui 5、Cesi

2023-12-08
cesiumjs模型,cesium 模型格式

本文目录一览: 1、Cesiumjs可以加载倾斜摄影的OSGB数据吗 2、Cesium 3Dtiles模型多边形裁剪简单整理 3、Cesium的扩展工具包-EarthSDK使用指南1 4、影像加载篇:

2023-12-08
cesiumjs搭建,cesium geojson

本文目录一览: 1、Cesium的扩展工具包-EarthSDK使用指南1 2、构建一个 Vite + Vue3 项目 开发Cesium 3、Cesium实战项目 4、cesium如何搭建dat.gui

2023-12-08
cesiumjs中文网地址,cesium中文文档

本文目录一览: 1、cesium 怎样设置web服务器 2、Cesium初始化选项 3、Cesium实战项目 4、Cesium的扩展工具包-EarthSDK使用指南1 5、Cesium(四)加载影像图

2023-12-08
cesiumjs编译(cesium nodejs)

本文目录一览: 1、Cesium初始化选项 2、cesium 和 Three.js有什么区别,以及二者与WebGL 的关系 3、Cesium(四)加载影像图层 4、Cesium在js中调用entity

2023-12-08
Cesium中文API详解

2023-05-20
关于earthsdk+cesium可以放大缩小的流光线的信息

2023-01-04
cesium滑块控制模型透明度-cesium滑块控制模型透明

2023-01-07
Cesium API详解

2023-05-19
Cesium坐标系详解

2023-05-19
java方法整理笔记(java总结)

2022-11-08
Cesium GeoJSON详解

2023-05-23
Cesium FlyTo详解

2023-05-18
印象笔记记录java学习(Java成长笔记)

2022-11-12
替代cesium,替代测试表

2022-11-29
全面解析Cesium Entity

2023-05-23
java客户端学习笔记(java开发笔记)

2022-11-14
发篇java复习笔记(java课程笔记)

2022-11-09
cesium加载3dtiles详解

2023-05-17