作為3D技術(shù)的發(fā)展趨勢，瀏覽器端3D技術(shù)越來越被一些技術(shù)公司重視。由此，Threejs非常注重3D渲染效果的真實(shí)性，對渲染真實(shí)性來說，使用光源是比不可少的技巧。Threejs，在光源方面提供了多種光源供選擇。
1.光源大概有7種，其中：
基礎(chǔ)光源4種：
環(huán)境光（AmbientLight； 會(huì)把它的顏色會(huì)添加到整個(gè)場景和所有對象的當(dāng)前顏色上）
點(diǎn)光源（PointLight ；空間中的一點(diǎn)，朝所有的方向發(fā)射光線）
聚光燈光源（SpotLight ；這種光源有聚光的效果，類似于臺(tái)燈，手電筒等）
方向光（DirectionalLight ；也稱無限光，從這種光源發(fā)出的光線可以看作是平行的，例如太陽光）
特殊光源有3種：
半球光光源（HemisphereLight，可以為室內(nèi)場景創(chuàng)建更加自然的光照效果，模擬反光面和光線微弱的天氣）
面光源（AreaLight使用這種光源可以指定散發(fā)光線的平面，而不是空間的一個(gè)點(diǎn)）
鏡頭炫光（LensFlare這不是一種光源，但是通過該炫光可以為場景中的光源添加炫目的效果）
2.光源基類
在three.js中，光源用light表示，它是所有光源的基類，其函數(shù)是：
THREE.Light ( hex )/////他有一個(gè)函數(shù)，接收一個(gè)16進(jìn)制的顏色值。
例：
let redLight = new THREE.Light(0xFF0000);
下面分別介紹three.js的基礎(chǔ)光源：
1.環(huán)境光
環(huán)境光是經(jīng)過多次反射而來的光稱為環(huán)境光，無法確定其最初的方向。環(huán)境光是一種無處不在的光。環(huán)境光源放出的光線被認(rèn)為來自任何方向。因此，當(dāng)你僅為場景指定環(huán)境光時(shí)，所有的物體無論法向量如何，都將表現(xiàn)為同樣的明暗程度。
環(huán)境光用THREE.AmbientLight來表示，例：
var light = new THREE.AmbientLight(0x917CF9 );
有一個(gè)接受顏色值的參數(shù)。
2.點(diǎn)光源
點(diǎn)光源：由這種光源放出的光線來自同一點(diǎn)，且方向輻射自四面八方。例如蠟燭放出的光，燈籠放出的光。
點(diǎn)光源用PointLight來表示，例：
PointLight( color, intensity, distance )
有3個(gè)參數(shù)，分別是：
光的顏色，
光的強(qiáng)度（默認(rèn)1.0），
光的距離（默認(rèn)0.0）
3.聚光燈
聚光燈：這種光源的光線從一個(gè)錐體中射出，在被照射的物體上產(chǎn)生聚光的效果。
聚光燈用SpotLight來表示，例：
THREE.SpotLight( hex, intensity, distance, angle, exponent )
有5個(gè)參數(shù)，分別是：
聚光燈發(fā)出的顏色，
光源強(qiáng)度，
光線強(qiáng)度，
聚光燈著色角度（用弧度作為單位，這個(gè)角度是和光源的方向形成的角度），
光源模型衰減的一個(gè)參數(shù)，越大越衰減
4.方向光
該光源可以看做是距離很遠(yuǎn)很遠(yuǎn)的光源，以至于該光源所發(fā)出的所有光線都是相互平行的，
方向光光源的一個(gè)范例就是太陽，方向光光源不像聚焦光那樣離目標(biāo)越遠(yuǎn)越暗淡，被方向光光源照亮的整個(gè)區(qū)域接收到的光強(qiáng)是一樣的
方向光用DirectionalLight來表示，例：
THREE.DirectionalLight = function ( hex, intensity )
有2個(gè)參數(shù)，分別是：
光的顏色，
光線強(qiáng)度
以上是three.js的基礎(chǔ)光源，下面來介紹特殊光源：
1.半球光源
這種光源可以為室外場景創(chuàng)建更加自然的光照效果
我們模擬室外光照的時(shí)候，可以使用方向光源來模擬太陽，再添加一個(gè)環(huán)境光源，為場景添加基礎(chǔ)色
但是這樣看起來不太自然，因?yàn)槭彝獾墓獠⒉欢际莵碜杂谏戏剑芏嗍莵碜杂诳諝獾纳⑸浜偷孛娴姆瓷洌约捌渌矬w的反射
所以在使用方向光源來模擬太陽的情況下再添加一個(gè)半球光就自然多了
半球光用HemisphereLight來表示
2.平面光源
平面光光源可以定義為一個(gè)發(fā)光的矩形
1 由于該光源是THREE.js的擴(kuò)展，需要引入擴(kuò)展庫
2 平面光源是一種很復(fù)雜的光源，因此不能再使用WebGLRenderer對象了，該對象會(huì)造成嚴(yán)重的性能損失
3 因此在處理復(fù)雜光源或者多個(gè)光源的時(shí)候，使用WebGL的延遲渲染器WebGLDeferredRenderer
平面光用AreaLight來表示
3.鏡頭炫光
當(dāng)我們直接朝著太陽拍照時(shí)就會(huì)出現(xiàn)鏡頭眩光（彩色的小光圈），對于游戲或者三維圖像來說，鏡頭眩光會(huì)使得場景看起來更真實(shí)
鏡頭炫光用LensFlare來表示
