新浪博客好长时间不能发博客了，把之前公众号上文章搬过来，和大家交流学习。

这篇文章和大家学习下shadowmap。

先看下cesium中显示效果，模拟太阳光阴影，通过调节底部时间轴可以看到阴影的变化：

这里的模型我们使用上篇文章的3dtiles数据。

1查看api：

主要参数：

isPointLight：是否为点光源

darkness：阴影的亮度

lightCamera：通过此设置光源位置

2cesium默认影阴影：

  在初始化viewer时开启shadows: true，可以看到cesium默认的太阳光阴影，这里需要指出如果需要在地形上接收阴影需要开启另外开关：

terrainShadows: Cesium.ShadowMode.ENABLED。

  这个示例全部代码的git示例地址：

 https://github.com/YanzheZhang/Cesium.HPUZYZ.Demo/blob/master/Cesium1.43/MyDemos/Tools-40shadowmap1.html 

示例代码：

var GoogleMap =ImageryProviderWebExtendTool.createGoogleMapsByUrl(Cesium, { url:"http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}"});

   var viewer = new Cesium.Viewer('cesiumContainer', {

       imageryProvider: GoogleMap,

       creditContainer: "creditContainer",

       selectionIndicator: true,

       animation: true,

       baseLayerPicker: false,

       geocoder: false,

       timeline: true,

       sceneModePicker: true,

       navigationHelpButton: false,

       infoBox: true,

       fullscreenButton: true,

       shadows: true,

       terrainShadows: Cesium.ShadowMode.ENABLED,

   });

   var shadowMap = viewer.shadowMap;//显示时间，调整时间就会出现阴影

   shadowMap.maxmimumDistance = 10000.0;

   var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({

       url: './sampledata/shp3dtiles1/tileset.json' //

   }));

   var tileset2 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({

       url: './sampledata/shp3dtiles2/tileset.json' // 

   }));

   tileset2.style = new Cesium.Cesium3DTileStyle({

       color: {

           conditions: [

                ['${height} >= 50.0','color("purple")'],//, 0.5

                ['${height} >= 20.0','color("red")'],

                ['true','color("blue")']

           ]

       },

       show: '${height} > 0',

       meta: {

           description: '"Building id ${id} has height ${height}."'

       }

   });

   tileset.readyPromise.then(function () {

       var boundingSphere = tileset.boundingSphere;

       viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0.0,-0.5, boundingSphere.radius));

       viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);

   }).otherwise(function (error) {

       throw (error);

   });

   viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement){

       var pickedFeature = viewer.scene.pick(movement.position);

       if (Cesium.defined(pickedFeature && pickedFeature._batchId !=undefined)) {

           ;

       }

},Cesium.ScreenSpaceEventType.LEFT_CLICK);

2自定义点光源

有时候我们会模拟局部的点光源作用下的阴影效果，这里就需要自定义shadowmap的参数来达到要求。

 

先看效果：

这里我们通过设置以下参数即可实现：

var lightCenter= Cesium.Cartesian3.fromDegrees(116.044, 30.109, 200.0);

    var camera = new Cesium.Camera(viewer.scene);

    camera.position = lightCenter;

    var shadowMapTemp = new Cesium.ShadowMap({

        context: scene.context,

        lightCamera: camera,

        maxmimumDistance: 10000.0,

        pointLightRadius: 1000.0,

        darkness: 0.1,

        cascadesEnabled: false,

        isPointLight: true,

        softShadows: false

    });

    shadowMapTemp.enabled = true;

    shadowMapTemp.debugShow = true;

    scene.shadowMap = shadowMapTemp;

通过camera.position =lightCenter;设置光源位置；

这两个参数控制光源范围：

maxmimumDistance: 10000.0,

pointLightRadius: 1000.0,

控制辅助调试控件显隐：

shadowMapTemp.debugShow= true; 

该示例整个代码就不贴出来了，在git中已经上传：

https://github.com/YanzheZhang/Cesium.HPUZYZ.Demo/blob/master/Cesium1.43/MyDemos/Tools-40shadowmap2-pointlight-3dtiles.html。

3 模型阴影

 

前面两个示例都是演示的3dtiles的阴影，下面效果是利用之前文章中的模型数据做个测试，看对模型是否有效果：

该示例整个代码就不贴出来了，在git中已经上传：

https://github.com/YanzheZhang/Cesium.HPUZYZ.Demo/blob/master/Cesium1.43/MyDemos/Tools-40shadowmap2-pointlight-model.html。

 

大家有什么问题可以公众号回复交流。