Threes.js入门篇之7 - 场景光照

 Three.js 主要支持四种光源模式，分别是 环境光、点光源、平行光 和 聚光灯。另外有半球光源、面光源等，本节暂不涉及。

一. 环境光 

       Ambient Light：所有对象的整体光照模型，控制整个场景的明暗。

[html]  view plain  copy

1. var ambientLight = new THREE.AmbientLight(ambiColor); // 环境光颜色  
2. scene.add(ambientLight);  

二. 点光源

       Point Light：所有方向发射光线，是应用最多的光源。

[html]  view plain  copy

1. var pointColor = "#ccffcc";  
2. var pointLight = new THREE.PointLight(pointColor);  
3. pointLight.distance = 100;  // 距离，决定了光线可以照射多远  
4. pointLight.intensity = 1;   // 强度  
5. scene.add(pointLight);  

       通常点光源不用来做阴影，主要是因为投射方向用阴影图来描述比较困难，我们看到的阴影主要是 Spot Light 来实现。

三. 平行光

       Directional Light：又称方向光，通常用来模拟太阳光（近似平行光源）。

[html]  view plain  copy

1. var pointColor = "#FFFFFF";  
2. var directionalLight = new THREE.DirectionalLight(pointColor);  
3. directionalLight.position.set(-40, 60, -10);  
4. directionalLight.castShadow = true;  
5. directionalLight.shadowCameraNear = 2;  
6. directionalLight.shadowCameraFar = 200;  
7. directionalLight.shadowCameraLeft = -50;  
8. directionalLight.shadowCameraRight = 50;  
9. directionalLight.shadowCameraTop = 50;  
10. directionalLight.shadowCameraBottom = -50;  
11.   
12. directionalLight.distance = 0;  
13. directionalLight.intensity = 0.5;        // 光强度，默认为1  
14. directionalLight.shadowMapHeight = 1024; // 阴影图尺寸  
15. directionalLight.shadowMapWidth = 1024;  

四. 聚光灯

       Spot Light：聚光灯与手电筒类似，与相机视角很接近，常用作阴影图的产生。

[html]  view plain  copy

1. var spotLight = new THREE.SpotLight(pointColor);  
2. spotLight.position.set(-40, 60, -10);  
3. spotLight.castShadow = true;      // 产生阴影  
4. spotLight.shadowCameraNear = 2;   // 从距离光源的哪一点开始生成阴影  
5. spotLight.shadowCameraFar = 200;  // 从距离光源哪一点开始停止生成阴影  
6. spotLight.shadowCameraFov = 30;   // 形成阴影的视场  
7. spotLight.target = plane;         // 光照照向地面  
8. spotLight.distance = 0;           // 距离target的距离  
9. spotLight.angle = 0.4;            // 光源照射出来的光柱有多宽