作為3D技術(shù)的發(fā)展趨勢,瀏覽器端3D技術(shù)越來越被一些技術(shù)公司重視瞭郑。由此氮趋,Threejs非常注重3D渲染效果的真實(shí)性伍派,對渲染真實(shí)性來說,使用光源是比不可少的技巧剩胁。Threejs拙已,在光源方面提供了多種光源供選擇。
1.光源大概有7種摧冀,其中:
基礎(chǔ)光源4種:
環(huán)境光(AmbientLight倍踪; 會把它的顏色會添加到整個場景和所有對象的當(dāng)前顏色上)
點(diǎn)光源(PointLight ;空間中的一點(diǎn)索昂,朝所有的方向發(fā)射光線)
聚光燈光源(SpotLight 建车;這種光源有聚光的效果,類似于臺燈椒惨,手電筒等)
方向光(DirectionalLight 缤至;也稱無限光,從這種光源發(fā)出的光線可以看作是平行的康谆,例如太陽光)
特殊光源有3種:
半球光光源(HemisphereLight领斥,可以為室內(nèi)場景創(chuàng)建更加自然的光照效果,模擬反光面和光線微弱的天氣)
面光源(AreaLight使用這種光源可以指定散發(fā)光線的平面沃暗,而不是空間的一個點(diǎn))
鏡頭炫光(LensFlare這不是一種光源月洛,但是通過該炫光可以為場景中的光源添加炫目的效果)
2.光源基類
在three.js中,光源用light表示孽锥,它是所有光源的基類嚼黔,其函數(shù)是:
THREE.Light ( hex )/////他有一個函數(shù),接收一個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)境光時抵卫,所有的物體無論法向量如何狮荔,都將表現(xiàn)為同樣的明暗程度。
環(huán)境光用THREE.AmbientLight來表示陌僵,例:
var light = new THREE.AmbientLight(0x917CF9 );
有一個接受顏色值的參數(shù)轴合。
2.點(diǎn)光源
點(diǎn)光源:由這種光源放出的光線來自同一點(diǎn),且方向輻射自四面八方碗短。例如蠟燭放出的光,燈籠放出的光题涨。
點(diǎn)光源用PointLight來表示偎谁,例:
PointLight( color, intensity, distance )
有3個參數(shù)总滩,分別是:
光的顏色,
光的強(qiáng)度(默認(rèn)1.0)巡雨,
光的距離(默認(rèn)0.0)
3.聚光燈
聚光燈:這種光源的光線從一個錐體中射出闰渔,在被照射的物體上產(chǎn)生聚光的效果。
聚光燈用SpotLight來表示铐望,例:
THREE.SpotLight( hex, intensity, distance, angle, exponent )
有5個參數(shù)冈涧,分別是:
聚光燈發(fā)出的顏色,
光源強(qiáng)度正蛙,
光線強(qiáng)度督弓,
聚光燈著色角度(用弧度作為單位,這個角度是和光源的方向形成的角度)乒验,
光源模型衰減的一個參數(shù)愚隧,越大越衰減
4.方向光
該光源可以看做是距離很遠(yuǎn)很遠(yuǎn)的光源,以至于該光源所發(fā)出的所有光線都是相互平行的锻全,
方向光光源的一個范例就是太陽狂塘,方向光光源不像聚焦光那樣離目標(biāo)越遠(yuǎn)越暗淡,被方向光光源照亮的整個區(qū)域接收到的光強(qiáng)是一樣的
方向光用DirectionalLight來表示鳄厌,例:
THREE.DirectionalLight = function ( hex, intensity )
有2個參數(shù)荞胡,分別是:
光的顏色,
光線強(qiáng)度
以上是three.js的基礎(chǔ)光源了嚎,下面來介紹特殊光源:
1.半球光源
這種光源可以為室外場景創(chuàng)建更加自然的光照效果
我們模擬室外光照的時候硝训,可以使用方向光源來模擬太陽,再添加一個環(huán)境光源新思,為場景添加基礎(chǔ)色
但是這樣看起來不太自然窖梁,因?yàn)槭彝獾墓獠⒉欢际莵碜杂谏戏剑芏嗍莵碜杂诳諝獾纳⑸浜偷孛娴姆瓷浼星簦约捌渌矬w的反射
所以在使用方向光源來模擬太陽的情況下再添加一個半球光就自然多了
半球光用HemisphereLight來表示
2.平面光源
平面光光源可以定義為一個發(fā)光的矩形
1 由于該光源是THREE.js的擴(kuò)展纵刘,需要引入擴(kuò)展庫
2 平面光源是一種很復(fù)雜的光源,因此不能再使用WebGLRenderer對象了荸哟,該對象會造成嚴(yán)重的性能損失
3 因此在處理復(fù)雜光源或者多個光源的時候假哎,使用WebGL的延遲渲染器WebGLDeferredRenderer
平面光用AreaLight來表示
3.鏡頭炫光
當(dāng)我們直接朝著太陽拍照時就會出現(xiàn)鏡頭眩光(彩色的小光圈),對于游戲或者三維圖像來說鞍历,鏡頭眩光會使得場景看起來更真實(shí)
鏡頭炫光用LensFlare來表示