上一節我們簡單的說了一下THREE中必要的元素。今天我們深入探討一下各種THREE的光源。

一 基礎光源

基礎光源有4種
1.THREE.AmbientLight（環境光源）
2.THREE.PointLight（點光源）
3.THREE.SpotLight（聚光燈）
4.THREE.DirectionalLight（平行光）

1.環境光源THREE.AmbientLight

環境光源沒有特定的方向，他的顏色會應用到全域性，它預設不會產生陰影。在沒有光源的情況下，我們什麼都看不到，而單獨使用其他光源的情況下，沒有照到的地方仍然是一片漆黑，所以環境光的存在會淡化這種現象。

單一的環境光一般不作為場景中的唯一光源。

2.點光源THREE.PointLight

點光源是一種單點發光，向各個方向照射的光源，因此考慮效能能問題，它預設不會產生陰影。與環境光不同它除了光源的顏色屬性（color）外，還包括其他屬性distance（光照的最大範圍）、intensity（光強）、position（光源位置），下面是一個例子。

var color = 0xccffcc;
var pointLight = new THREE.PointLight(color);
pointLight.distance = 100;
pointLight.intensity = 1;
scene.add(pointLight);

渲染出來的結果為

點光源的應用場合主要是需要中心發光的物理，例如模擬太陽系中太陽的光源。

3.聚光燈THREE.SpotLight

聚光燈使用的範圍非常廣泛，它的光類似手電筒的光，用於高亮一些場景。而且它能夠產生陰影。它的屬性除了點光源的屬性外還包括angle（角度範圍）、castShadow（是否產生陰影）、exponent（光強遞減度）。下面是程式碼。

var color = 0xffffff;
var spotLight = new THREE.SpotLight(color);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
spotLight.shadowCameraNear = 2;
spotLight.shadowCameraFar = 200;
spotLight.shadowCameraFov = 30;
spotLight.target = plane;
spotLight.distance = 0;
spotLight.angle = 0.4;

我們給聚光燈的castShadow屬性設定了true。同事還需要指定誰產生陰影，誰來接受陰影。圖中我們為正方體castShadow屬性設定了true，為平面設定了receiveShadow屬性設定了true。

4.平行光THREE.DirectionalLight

平行光就是光傳遞的方向相同的光，類似於太陽的光線，它的屬性和聚光燈差不多（當然平行光沒有角度屬性，而是用shadowCameraNear、shadowCameraFar、shadowCameraLeft、shadowCameraRight、shadowCameraTop、shadowCameraBottom六個屬性），程式碼如下。

var color= 0xffaa00;
var directionalLight = new THREE.DirectionalLight(color);
directionalLight.position.set(0, 80, 0);
directionalLight.castShadow = true;
directionalLight.shadowCameraNear = 2;
directionalLight.shadowCameraFar = 200;
directionalLight.shadowCameraLeft = -50;
directionalLight.shadowCameraRight = 50;
directionalLight.shadowCameraTop = 50;
directionalLight.shadowCameraBottom = -50;
directionalLight.distance = 0;
directionalLight.intensity = 0.5;
directionalLight.shadowMapHeight = 1024;
directionalLight.shadowMapWidth = 1024;
directionalLight.target= cube; //注意target只能是一個Object3D()物件。

directionalLight.shadowCamera的6個屬性分別是平行光體的近面位置、遠面位置、左面位置、右面位置、上面位置、下面位置，類似於正交投影相機的屬性。

和spotLight一樣，他們都有一個target屬性，這個屬性就是光照射的方向，同position屬性一起確定了光源和照射的位置。這裡我寫了一個demo，不太清楚地同學可以看一下target和position

二 特殊光源

1.半球光源THREE.HemisphereLight

特殊光源是在基礎光源的基礎上通過計算得到的。我們先講一下半球光源（HemisphereLight），這個光源更像是地球戶外場景的自然光（AmbientLight更像是宇宙背景光）。
有三個屬性分別為:
1.groundColor從地面發出的光線顏色。
2.color從天空發出的顏色。
3.intensity光線照射強度。

var hemiLight = new THREE.HemisphereLight(0x0000ff, 0x00ff00, 0.6); //這裡我們讓天空為藍色，地面為綠色，0.6光線照射強度。
hemiLight.position.set(0, 500, 0);
scene.add(hemiLight);

2.面積光源THREE.AreaLight

面積光源就是一個會發光的面，可以向操作一個面一樣操縱他的朝向。它的出行包括顏色color，光的強度intensity，寬度width，高度height。

var areaLight = new THREE.AreaLight(0xff0000, 3);
areaLight.position.set(-10, 10, -35);
areaLight.rotation.set(-Math.PI / 2, 0, 0);
areaLight.width = 4;
areaLight.height = 9.9;
scene.add(areaLight);

在WebGLRenderer中使用THREE.AreaLight會有效能問題，所以要使用WebGLDeferredRenderer。

光源我們就先講這麼多，用的多了就熟了。新版本的光源有一些改變，如果現在使用的是新版本請移步至官網檢視documents。

轉載請註明原文連結 郭志強的