three.js之光源

作為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來表示

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末舵抹,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子劣砍,更是在濱河造成了極大的恐慌惧蛹,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,548評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異香嗓,居然都是意外死亡迅腔,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,497評論 3 399
  • 文/潘曉璐 我一進(jìn)店門靠娱,熙熙樓的掌柜王于貴愁眉苦臉地迎上來沧烈,“玉大人,你說我怎么就攤上這事像云⌒咳福” “怎么了?”我有些...
    開封第一講書人閱讀 167,990評論 0 360
  • 文/不壞的土叔 我叫張陵迅诬,是天一觀的道長腋逆。 經(jīng)常有香客問我,道長百框,這世上最難降的妖魔是什么闲礼? 我笑而不...
    開封第一講書人閱讀 59,618評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮铐维,結(jié)果婚禮上柬泽,老公的妹妹穿的比我還像新娘。我一直安慰自己嫁蛇,他們只是感情好锨并,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,618評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著睬棚,像睡著了一般第煮。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上抑党,一...
    開封第一講書人閱讀 52,246評論 1 308
  • 那天包警,我揣著相機(jī)與錄音,去河邊找鬼底靠。 笑死害晦,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的暑中。 我是一名探鬼主播壹瘟,決...
    沈念sama閱讀 40,819評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼鳄逾!你這毒婦竟也來了稻轨?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,725評論 0 276
  • 序言:老撾萬榮一對情侶失蹤雕凹,失蹤者是張志新(化名)和其女友劉穎殴俱,沒想到半個月后政冻,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,268評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡粱挡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,356評論 3 340
  • 正文 我和宋清朗相戀三年赠幕,在試婚紗的時候發(fā)現(xiàn)自己被綠了俄精。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片询筏。...
    茶點(diǎn)故事閱讀 40,488評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖竖慧,靈堂內(nèi)的尸體忽然破棺而出嫌套,到底是詐尸還是另有隱情,我是刑警寧澤圾旨,帶...
    沈念sama閱讀 36,181評論 5 350
  • 正文 年R本政府宣布踱讨,位于F島的核電站,受9級特大地震影響砍的,放射性物質(zhì)發(fā)生泄漏痹筛。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,862評論 3 333
  • 文/蒙蒙 一廓鞠、第九天 我趴在偏房一處隱蔽的房頂上張望帚稠。 院中可真熱鬧,春花似錦床佳、人聲如沸滋早。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,331評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽杆麸。三九已至,卻和暖如春浪感,著一層夾襖步出監(jiān)牢的瞬間昔头,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,445評論 1 272
  • 我被黑心中介騙來泰國打工影兽, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留揭斧,地道東北人。 一個月前我還...
    沈念sama閱讀 48,897評論 3 376
  • 正文 我出身青樓赢笨,卻偏偏與公主長得像未蝌,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子茧妒,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,500評論 2 359

推薦閱讀更多精彩內(nèi)容

  • 一萧吠、四大光照類型1.環(huán)境光(Ambient Light) 一個物體即使沒有直接被光源照射,但是只要有光線通過其他物...
    CarlDonitz閱讀 1,494評論 0 0
  • 我們目前使用的所有光照都來自于一個單獨(dú)的光源桐筏,這是空間中的一個點(diǎn)纸型。它的效果不錯,但是在真實(shí)世界,我們有多種類型的光...
    IceMJ閱讀 1,173評論 1 1
  • 一提到摳圖、去掉背景琼腔,我們立即會想到Photoshop瑰枫。作為圖片處理的專業(yè)軟件,Photoshop在摳圖上自然很厲...
    工作力閱讀 1,776評論 0 3
  • 美欒翻出了她99年的筆記丹莲,記錄了當(dāng)時創(chuàng)城的盛況光坝。然后西柚說,你這一輩子都在創(chuàng)城甥材;欒回盯另,多有意義……? ...
    一枕清菏閱讀 240評論 0 0
  • 光輝歲月BEYOND - 命運(yùn)派對 上個世紀(jì)的中國農(nóng)村洲赵,改革開放的紅利已經(jīng)凸顯鸳惯,好多年輕人都選擇外出打工掙錢,南下...
    嘿大圣閱讀 246評論 0 0