Cesium学习系列工具篇40-shadowmap
2020-01-14 21:06阅读：
新浪博客好长时间不能发博客了，把之前公众号上文章搬过来，和大家交流学习。
这篇文章和大家学习下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
。
大家有什么问题可以公众号回复交流。
