北京CBD夜景燈光特效還可以這麼美，四步教你實現！

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);

基於以上四步，就實現了城市夜景燈光特效。
友情提示：
1.每種燈光的具體用法，可以參考在線範例：
http://support.supermap.com.cn:8090/webgl/examples/editor.html#lightSource
2.場景中的紋理自發光，泛光等其它特效可參考特效的製作流程文檔。