Cesium中3DTile介绍及示例
什么是 3DTile
官网介绍
https://github.com/AnalyticalGraphicsInc/3d-tiles
tileset.json
3D Tiles 引入了3D图形领域的技术并建立在glTF之上，它定义了一个空间层次结构，用于快速流和精确渲染，平衡从全球到建筑内部的任何规模的性能和视觉质量。
文件格式介绍
https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/master/specification
tileset是在空间数据结构（树）中组织的一组tile。tileset由至少一个tileset JSON文件描述。
批量3D模型（b3dm） 异构3D模型。例如纹理地形和表面，3D建筑外部和内部，大型模型。
实例3D模型（i3dm） 3D模型实例。例如树木，风车，螺栓。
点云（pnts） 点云数据
复合（cmpt） 将不同格式的切片连接到一个切片中。
官网的 3DTile 模型示例
https://github.com/AnalyticalGraphicsInc/3d-tiles-samples
运行步骤：
在新建 tilesets 目录下，新建 index.html，内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello World!</title>
<script src="https://cesiumjs.org/releases/1.59/Build/Cesium/Cesium.js"></script>
<link href="https://cesiumjs.org/releases/1.59/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<style>
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
}
</style>
</head>
<body>
<div id="cesiumContainer">
</div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer');
var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
// url : 'http://localhost:8003/tilesets/TilesetWithDiscreteLOD/tileset.json'
url : 'http://localhost:8003/tilesets/TilesetWithRequestVolume/tileset.json'
}));
viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0, -0.5, 0));
</script>
</body>
</html>
进入目录： 3d-tiles-samples
cnpm i
npm run start
打开浏览器看到效果：
http://localhost:8003/tilesets/
问题记录：
如何查看 Tileset with request volumes. 示例中的球球？
【解决】在 建筑的第一层房间里面，慢慢放到就看得见
