Threes.js入門篇之7 - 場景光照

allenjiao發表於2018-03-14
JS

 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;            // 光源照射出來的光柱有多寬  

相關文章