北京CBD夜景灯光特效还可以这么美，四步教你实现！

超图知道超图集团 2022-07-17

SuperMap iClient3D for WebGL默认的光照系统，能够满足大多数情况下的需求。但在一些特殊的场景中，需要对场景内的光照系统进行个性化设置，这时就可以使用自定义光源来实现。本文以北京CBD夜景为例，介绍如何通过多种自定义光源来打造城市夜景灯光特效。先来看看最终实现的北京CBD夜景灯光特效。

实现这样的灯光特效很简单，只需要四步哦！

第一步因为是夜景，首先关闭太阳光与环境光

scene.sun.show = false;

scene.lightSource.ambientLightColor = new Cesium.Color(0, 0, 0, 1);

第二步给场景添加一个平行光和点光源作为底光
平行光位置不限，保证整个场景都能有一个偏蓝的色调。点光源的置于重点建筑群附近，提升该区域的亮度，作为整个场景的视觉中心区域。

// 新增直射光-整个环境var dirLightOptions = {
    targetPosition: targetPosition1,
    color: new Cesium.Color(0.01, 0.01, 0.3, 1.0),
    intensity: 0.1
};
directionalLight_v = new Cesium.DirectionalLight(position, dirLightOptions);
scene.addLightSource(directionalLight_v);
// 新增点光源-整个环境var pointLightPos3 = new Cesium.Cartesian3.fromDegrees(116.46477932175468, 39.905807158839266, 220.0);
var pointLightOptions3 = {
    cutoffDistance: 2000,
    color: new Cesium.Color(0.04, 0.18, 0.43, 1.0),
    intensity: 0.001
};
pointLight3 = new Cesium.PointLight(pointLightPos3, pointLightOptions3);
scene.addLightSource(pointLight3);

第三步依次给重点建筑单独打造灯光效果
这里以场景中的最高楼-国贸大厦为例，在其周围添加多个点光源，并设置光源颜色为偏青蓝色的冷色调。点光源的高度大致位于80米处，以打亮建筑的中下部分。用同样的方法给其它重点建筑添加灯光效果。

// 新增点光源-最高建筑var pointLightPoszuigao1 = new Cesium.Cartesian3.fromDegrees(116.45976565628527, 39.91042009316276, 80.0);
var pointLightOptionszuigao1 = {
    cutoffDistance: 360.0,
    color: new Cesium.Color(0.15, 0.45, 1.4, 1.0),
    intensity: 0.12
};
pointLightzuigao1 = new Cesium.PointLight(pointLightPoszuigao1, pointLightOptionszuigao1);
scene.addLightSource(pointLightzuigao1);
var pointLightPoszuigao2 = new Cesium.Cartesian3.fromDegrees(116.46059852558402, 39.91076488114754, 80.0);
pointLightzuigao2 = new Cesium.PointLight(pointLightPoszuigao2, pointLightOptionszuigao1);
scene.addLightSource(pointLightzuigao2);
var pointLightPoszuigao3 = new Cesium.Cartesian3.fromDegrees(116.46058155476312, 39.9095945894333, 80.0);
pointLightzuigao3 = new Cesium.PointLight(pointLightPoszuigao3, pointLightOptionszuigao1);
scene.addLightSource(pointLightzuigao3);
var pointLightPoszuigao4 = new Cesium.Cartesian3.fromDegrees(116.4615882163, 39.910460599, 80.0);
pointLightzuigao4 = new Cesium.PointLight(pointLightPoszuigao4, pointLightOptionszuigao1);
scene.addLightSource(pointLightzuigao4);

第四步给道路添加路灯效果
前面添加的灯光都是针对建筑添加的，道路上面也会有很多的路灯。这里我们通过聚光灯来模拟路灯的效果，因为路灯具有明显的方向性。由于之前添加的灯光都是冷色调的，这里给路灯设置一个比较明显的暖色调，平衡场景中的颜色分布。因为场景是支持HDR的，所以可以给光源颜色设置大于1的RGB值(6, 5, 0.2, 1)。另外给光源设置一个合适的衰减系数（3），保证灯光在向周围传播的时候逐渐减弱。

// 新增聚光灯-横向道路-路灯1var spotLightPosludeng1_1 = new Cesium.Cartesian3.fromDegrees(116.46215548997236, 39.907743432631186, 30);
var spotLightTargetPosludeng1_1 = new Cesium.Cartesian3.fromDegrees(116.46215548997236, 39.907743432631186, 0);
var spotLightOtionsludeng1_1 = {
    color: new Cesium.Color(6, 5, 0.2, 1),
    distance: 100,
    decay: 3,
    intensity: 13,
    angle: Math.PI / 2
};
spotLightludeng1_1 = new Cesium.SpotLight(spotLightPosludeng1_1, spotLightTargetPosludeng1_1, spotLightOtionsludeng1_1);
scene.addLightSource(spotLightludeng1_1);
// 新增聚光灯-横向道路-路灯2var spotLightPosludeng1_2 = new Cesium.Cartesian3.fromDegrees(116.46008198437434, 39.90779904562042, 30);
var spotLightTargetPosludeng1_2 = new Cesium.Cartesian3.fromDegrees(116.46008198437434, 39.90779904562042, 0);
spotLightludeng1_2 = new Cesium.SpotLight(spotLightPosludeng1_2, spotLightTargetPosludeng1_2, spotLightOtionsludeng1_1);
scene.addLightSource(spotLightludeng1_2);
// 新增聚光灯-横向道路-路灯3var spotLightPosludeng1_3 = new Cesium.Cartesian3.fromDegrees(116.45718936579341, 39.907836561376094, 30);
var spotLightTargetPosludeng1_3 = new Cesium.Cartesian3.fromDegrees(116.45718936579341, 39.907836561376094, 0);
spotLightludeng1_3 = new Cesium.SpotLight(spotLightPosludeng1_3, spotLightTargetPosludeng1_3, spotLightOtionsludeng1_1);
scene.addLightSource(spotLightludeng1_3);