作為3D技術的發展趨勢，瀏覽器端3D技術越來越被一些技術公司重視。由此，Threejs非常注重3D渲染效果的真實性，對渲染真實性來說，使用光源是比不可少的技巧。Threejs，在光源方面提供了多種光源供選擇。

1.光源大概有7種，其中：

基礎光源4種：

環境光（AmbientLight； 會把它的顏色會添加到整個場景和所有對象的當前顏色上）

點光源（PointLight ；空間中的一點，朝所有的方向發射光線）

聚光燈光源（SpotLight ；這種光源有聚光的效果，類似于臺燈，手電筒等）

方向光（DirectionalLight ；也稱無限光，從這種光源發出的光線可以看作是平行的，例如太陽光）

特殊光源有3種：

半球光光源（HemisphereLight，可以為室內場景創建更加自然的光照效果，模擬反光面和光線微弱的天氣）

面光源（AreaLight使用這種光源可以指定散發光線的平面，而不是空間的一個點）

鏡頭炫光（LensFlare這不是一種光源，但是通過該炫光可以為場景中的光源添加炫目的效果）

2.光源基類

在three.js中，光源用light表示，它是所有光源的基類，其函數是：

THREE.Light ( hex )/////他有一個函數，接收一個16進制的顏色值。

例：

let redLight = new THREE.Light(0xFF0000);

下面分別介紹three.js的基礎光源：

1.環境光

環境光是經過多次反射而來的光稱為環境光，無法確定其最初的方向。環境光是一種無處不在的光。環境光源放出的光線被認為來自任何方向。因此，當你僅為場景指定環境光時，所有的物體無論法向量如何，都將表現為同樣的明暗程度。

環境光用THREE.AmbientLight來表示，例：

var light = new THREE.AmbientLight(0x917CF9 );

有一個接受顏色值的參數。

2.點光源

點光源：由這種光源放出的光線來自同一點，且方向輻射自四面八方。例如蠟燭放出的光，燈籠放出的光。

點光源用PointLight來表示，例：

PointLight( color, intensity, distance )

有3個參數，分別是：

光的顏色，

光的強度（默認1.0），

光的距離（默認0.0）

3.聚光燈

聚光燈：這種光源的光線從一個錐體中射出，在被照射的物體上產生聚光的效果。

聚光燈用SpotLight來表示，例：

THREE.SpotLight( hex, intensity, distance, angle, exponent )

有5個參數，分別是：

聚光燈發出的顏色，

光源強度，

光線強度，

聚光燈著色角度（用弧度作為單位，這個角度是和光源的方向形成的角度），

光源模型衰減的一個參數，越大越衰減

4.方向光

該光源可以看做是距離很遠很遠的光源，以至于該光源所發出的所有光線都是相互平行的，

方向光光源的一個范例就是太陽，方向光光源不像聚焦光那樣離目標越遠越暗淡，被方向光光源照亮的整個區域接收到的光強是一樣的

方向光用DirectionalLight來表示，例：

THREE.DirectionalLight = function ( hex, intensity )

有2個參數，分別是：

光的顏色，

光線強度

以上是three.js的基礎光源，下面來介紹特殊光源：

1.半球光源

這種光源可以為室外場景創建更加自然的光照效果

我們模擬室外光照的時候，可以使用方向光源來模擬太陽，再添加一個環境光源，為場景添加基礎色

但是這樣看起來不太自然，因為室外的光并不都是來自于上方，很多是來自于空氣的散射和地面的反射，以及其他物體的反射

所以在使用方向光源來模擬太陽的情況下再添加一個半球光就自然多了

半球光用HemisphereLight來表示

2.平面光源

平面光光源可以定義為一個發光的矩形

1 由于該光源是THREE.js的擴展，需要引入擴展庫

2 平面光源是一種很復雜的光源，因此不能再使用WebGLRenderer對象了，該對象會造成嚴重的性能損失

3 因此在處理復雜光源或者多個光源的時候，使用WebGL的延遲渲染器WebGLDeferredRenderer

平面光用AreaLight來表示

3.鏡頭炫光

當我們直接朝著太陽拍照時就會出現鏡頭眩光（彩色的小光圈），對于游戲或者三維圖像來說，鏡頭眩光會使得場景看起來更真實

鏡頭炫光用LensFlare來表示