Cesium加载地形显示光照

最新推荐文章于 2025-11-14 09:35:35 发布

原创最新推荐文章于 2025-11-14 09:35:35 发布 · 526 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

Cesium 专栏收录该内容

4 篇文章

订阅专栏

该代码示例展示了如何利用CesiumJavaScript库创建一个3D地球应用，并启用地形光照和水面波浪效果。通过设置`terrainProvider`并请求顶点法线和水面膜，实现了地形的光照效果和水面的动态表现。同时，确保了在场景中开启光照功能。

<!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>地形光照</title>
        <script src="../Build/Cesium/Cesium.js"></script>
        <style>
          @import url(../Build/Cesium/Widgets/widgets.css);
          @import url(../Apps/Sandcastle/templates/bucket.css); 
          html,
          body,
          #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
          }
        </style>
      </head>
<body>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay"><h1>loading..</h1></div>
    <div id="toolbar"></div>
    <script>
      var viewer = new Cesium.Viewer('cesiumContainer',{
        // animation:false, // 是否创建动画小控件，及右下角的仪表，默认为T
        // baseLayerPicker:false, //是否显示图层选择器，默认位T
        // fullscreenButton:false, // 是否显示全屏按钮，默认为T
        // geocoder:false, // 是否显示Geocoder(右上角查询按钮)，默认为T
        // homeButton:false, // 是否显示Home按钮 ，默认为T
        // infoBox:false, // 是否显示信息框，默认为T
        // sceneModePicker:false, // 是否显示三维/二维地图选择器，默认为T
        // selectionIndicator:false, // 是否显示选择指示器（鼠标点击显示绿框），默认为T
        // timeline:false, // 是否显示时间轴，默认为T
        // navigationHelpButton:false, // 是否显示右上角的帮助按钮，默认为T
        // scene3DOnly:true, // 如果设置为true,则所有几何图形以三维模式绘制以节约GPU资源，默认为F
        terrainProvider:Cesium.createWorldTerrain({
          // 创建地形服务
          requestVertexNormals:true, // 添加地形光照
          requestWaterMask:true //添加水面波浪效果
        }),
        shouldAnimate: true,
        terrainProvider: Cesium.createWorldTerrain(),  
      });
      viewer.scene.globe.enableLighting = true; //terrain和globe必须同时开启光照
       
    </script>
</body>
</html>