Three.js撥雲見霧(2)——照亮世界的光源｜ 8月更文挑戰

這是我參與8月更文挑戰的第2天，活動詳情查看：8月更文挑戰

Threejs場景對象Scene主要是由模型對象和光源對象Light構成，Three.js中有許多不一樣種類的光源，每種光源都有特別的行爲和用法。常見的光源種類和基本描述以下表所示：

接下來，咱們來看一下他們的基本描述和入門使用。

環境光 AmbientLight

環境光是沒有特定方向的光源，主要是均勻總體改變Threejs物體表面的明暗效果，這一點和具備方向的光源不一樣，好比點光源可讓物體表面不一樣區域明暗程度不一樣。

//環境光:環境光顏色RGB成分分別和物體材質顏色RGB成分分別相乘 
let ambient = new THREE.AmbientLight(0x444444); 
//環境光對象添加到scene場景中
scene.add(ambient);
複製代碼

在建立THREE.AmbientLight時，顏色會應用到全局。該光源並無特別的來源方向，而且THREE.AmbientLight不會生成陰影。一般，不能將THREE.AmbientLight做爲場景中惟一的光源，由於它會將場景中的全部物體渲染爲相同的顏色，而無論什麼形狀。在使用其餘光源(如THREE.SpotLight或者THREE.DirectionalLight)的同時使用它，能夠用來弱化陰影或者給場景添加一些額外的顏色。

點光源 PointLight

點光源就像生活中的白熾燈，光線沿着發光核心向外發散，同一平面的不一樣位置與點光源光線入射角是不一樣的，點光源照射下，同一個平面不一樣區域是呈現出不一樣的明暗效果。

和環境光不一樣，環境光不須要設置光源位置，而點光源須要設置位置屬性position，光源位置不一樣，物體表面被照亮的面不一樣，遠近不一樣由於衰減明暗程度不一樣。

//點光源 
let point = new THREE.PointLight(0xffffff); 
//設置點光源位置，改變光源的位置 
point.position.set(400, 200, 300); 
scene.add(point);
複製代碼

平行光 DirectionalLight

這種類型的光能夠看做是距離很遠的光。它發出的全部光纖都是相互平行的。平行光的一個範例就是太陽光。

點光源由於是向四周發散，因此設置好位置屬性position就能夠肯定光線和物體表面的夾角，對於平行光而言,主要是肯定光線的方向,光線方向設定好了，光線的與物體表面入射角就肯定了，僅僅設置光線位置是不起做用的。

在三維空間中爲了肯定一條直線的方向只須要肯定直線上兩個點的座標便可，因此Three.js平行光提供了位置position和目標target兩個屬性來一塊兒肯定平行光方向。目標target的屬性值能夠是Threejs場景中任何一個三維模型對象，好比一個網格模型Mesh，這樣Threejs計算平行光照射方向的時候，會經過自身位置屬性position和target表示的物體的位置屬性position計算出來。

// 平行光 
let directionalLight = new THREE.DirectionalLight(0xffffff, 1); 
// 設置光源的方向：經過光源position屬性和目標指向對象的position屬性計算
directionalLight.position.set(80, 100, 50); 
// 方向光指向對象網格模型mesh2，能夠不設置，默認的位置是0,0,0 
directionalLight.target = mesh2; 
scene.add(directionalLight);
複製代碼

平行光若是不設置position和target屬性，光線默認從上往下照射，也就是能夠認爲(0,1,0)和(0,0,0)兩個座標肯定的光線方向。

聚光源 SpotLight

聚光源能夠認爲是一個沿着特定方會逐漸發散的光源，照射範圍在三維空間中構成一個圓錐體。經過屬性angle能夠設置聚光源發散角度，聚光源照射方向設置和平行光光源同樣是經過位置position和目標target兩個屬性來實現。

THREE.SpotLight是最常使用的光源之一(特別是你想要使用陰影的話)。它是一種具備錐形效果的光源，咱們能夠把它與手電筒或者燈塔產生的光進行對比。

// 聚光光源 
let spotLight = new THREE.SpotLight(0xffffff); 
// 設置聚光光源位置 
spotLight.position.set(200, 200, 200); 
// 聚光燈光源指向網格模型mesh2 
spotLight.target = mesh2; 
// 設置聚光光源發散角度 
spotLight.angle = Math.PI / 6;
//光對象添加到scene場景中
scene.add(spotLight);
複製代碼

總結

今天學習了THREE.js中比較常見的基礎光源以及它們各自的基本用法，熟悉這些用法可讓咱們快速的瞭解到光源的如何使用。針對光源，材質(後面會講)會對光源有不一樣的反應。THREE.AmbientLight光源的顏色能夠附加到場景中的每一種顏色上，一般用來柔化生硬的顏色和陰影。THREE.PointLight光源會朝全部方向發射光線，不能被用來建立陰影。THREE.SpotLight光源相似於手電筒。它有一個錐形的光束，能夠配置它隨着距離的增大而逐漸變弱，而且能夠生成陰影。咱們還了解了THREE.DirectionalLight光源。這個光源至關於遠光的效果，好比太陽光。它的光線彼此平行，其光強並不會隨着與目標對象距離的增大而減弱。

除了這些基本光源以外，還有一些特殊的光源：THREE.HemisphereLight能夠建立一個更加天然的戶外效果；THREE.AreaLight能夠不從單個點發射光線，而是從一個很大的區域發射光線；THREE.LensFlare對象能夠添加圖像化的鏡頭光暈。固然這些光源基本用法都是同樣的，若是須要詳細瞭解全部光源用法和屬性的的小夥伴能夠參考THREE.js官網以及THRR.js開發指南。

以上就是今天的所有內容了，感謝你們點贊、關注和收藏。