Cesium中3DTile介绍及示例

最新推荐文章于 2024-07-03 14:48:31 发布

lvye1221

最新推荐文章于 2024-07-03 14:48:31 发布

阅读量4.7k

点赞数

分类专栏： Cesium 文章标签： Cesium 3dtile

本文链接：https://blog.csdn.net/lvye1221/article/details/98211973

版权

Cesium 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

什么是 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. 示例中的球球？
【解决】在建筑的第一层房间里面，慢慢放到就看得见

lvye1221

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Cesium中3DTile介绍及示例

什么是 3DTile官网介绍https://github.com/AnalyticalGraphicsInc/3d-tilestileset.json3D Tiles 引入了3D图形领域的技术并建立在glTF之上，它定义了一个空间层次结构，用于快速流和精确渲染，平衡从全球到建筑内部的任何规模的性能和视觉质量。文件格式介绍https://github.com/AnalyticalGrap...
复制链接

扫一扫

专栏目录