Cesium自动生成建筑物3D轮廓模型

Cesium提供方法自动生成建筑物3D模型,也就是根据地面上的图片,建筑物的周围轮廓生成一个模拟的3D建筑物的轮廓,并放置在地球的建筑物位置,相关注释在代码中已经体现了。下面通过代码演示整个过程:

html/xml 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    // 设置token
    Cesium.Ion.defaultAccessToken = 'token';

    // 初始化一个id为 `cesiumContainer`的HTML元素作为我们的容器,这里不传ID传DO .
    const viewer = new Cesium.Viewer('cesiumContainer', {});    
	
    // 加载OSM建筑,也就是一些城市的白膜建筑,只有形状没有纹理的模型.
    const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());   
    //飞入到某个点查看
    viewer.camera.flyTo({
      destination : Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
      orientation : {
        heading : Cesium.Math.toRadians(0.0),
        pitch : Cesium.Math.toRadians(-15.0),
      }
    });
  </script>
 </div>
</body>
</html>

效果图 以上如有问题可以在评论区留言

相关推荐
lrh30251 小时前
Custome SRP 17 - FXAA
3d·unity·srp·render pipeline·fxaa·抗锯齿
二狗哈2 小时前
Cesium快速入门34:3dTile高级样式设置
前端·javascript·算法·3d·webgl·cesium·地图可视化
AndrewHZ1 天前
【图像处理基石】什么是光栅化?
图像处理·人工智能·算法·计算机视觉·3d·图形渲染·光栅化
二狗哈1 天前
Cesium快速入门33:tile3d设置样式
3d·状态模式·webgl·cesium·地图可视化
接着奏乐接着舞。1 天前
3D地球可视化教程 - 第6篇:蜂巢网格与自定义几何体
前端·vue.js·3d·threejs
戴西软件1 天前
戴西软件3DViz Convert:解锁三维数据流动,驱动一体化协同设计
大数据·人工智能·安全·3d·华为云·云计算
军军君012 天前
Three.js基础功能学习一:环境资源及基础知识
开发语言·javascript·学习·3d·前端框架·threejs·三维
EliseL2 天前
SuperMap iClient3D for WebGL如何加载iDesktopX 场景美化绘制资产
3d·webgl·三维
KoalaShane2 天前
Web 3D设计[Three.js]关于右键点击Canvas旋转模型,在其他元素上触发右键菜单问题
前端·javascript·3d
xwz小王子2 天前
Mini3DV 2025 | 观点总结:具身智能前沿与展望
人工智能·3d