Cesium添加3DTile

baker_zhuang

已于 2023-09-27 15:35:45 修改

阅读量536

点赞数

分类专栏： cesium 文章标签： 3d Cesium

于 2023-09-05 08:58:35 首次发布

本文链接：https://blog.youkuaiyun.com/qq_26881073/article/details/132972246

版权

cesium 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何使用Cesium库在HTML页面上创建3D模型并在地图上展示，通过加载3DTileset并设置相机视角，实现模拟现实环境的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Cesium最常用来做数字孪生，在3D地图上创建一个3D模型，并将它放在地图上，贴合地面，使之看起来更加贴近现实中的实际情况，这里就在地球上放置一个3DTile的模型来模拟现实情况。这里的模型我是找的例子，只做一个实现方法上的演示，下面是代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.104/Build/Cesium/Widgets/widgets.css" rel="stylesheet"/>
  </head>
  <body>
    <div id="cesiumContainer" class="fullSize"></div>

    <script>
    // 设置token
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjNDgzZGEyYy0yZmFkLTQ3ZGItOWU2My1jZjRkN2ZhNTU0OTAiLCJpZCI6MTYyODM0LCJpYXQiOjE2OTMxMjA4MTB9.xHUQdfmqpl3Iei6Iur_AOYeg2jyDiXZsaYBg33KU_zg';
	  //初始化div容器为cesium
      var viewer = new Cesium.Viewer('cesiumContainer');
	  //加载瓦片集
      const tileset = new Cesium.Cesium3DTileset({
        url: "tileset.json",
      });
		
      tileset.readyPromise.then(function (tileset) {
	  //将瓦片集添加到cesium场景中
        viewer.scene.primitives.add(tileset);
		//调用viewer.zoomTo()方法将相机聚焦在瓦片集上
        viewer.zoomTo(
          tileset,
		  //这里使用了一个HeadingPitchRange对象，其中包含了相机的朝向、俯仰角和距离
          new Cesium.HeadingPitchRange(
            0.0,
            -0.5,
            tileset.boundingSphere.radius * 2.0
          )
        );
      });
    </script>
  </body>
</html>