Three.Light
首先展示的是使用半球光引用的效果, 光源直接放置於場景之上,光照顏色從天空光線顏色顏色漸變到地面光線顏色。光照主要有
- AmbientLight 環境光
- DirectionalLight 平行光
- HemisphereLight 半球光
- PointLight 點光源
- RectAreaLight 平面光光源
- SpotLight 聚光燈
由於three.js視覺化還是不夠完善, 因此有了眾多光源的輔助物件, 每一種燈光都有自己的特性以及共性, 大量的燈光可以產生陰影, 後面一一介紹
燈光
Light有很多相關內容, 首先先看下眾多燈光的效果
1. Light
光源的基類 - 所有其他的光型別都繼承了該類描述的屬性和方法
Light屬性
- color : Color
- 光源的顏色。
- 如果構造的時候沒有傳遞,預設會建立一個新的 Color 並設定為白色。
- intensity : Float
- 光照的強度,或者說能量。
- 在 physically correct 模式下, color 和強度 的乘積被解析為以坎德拉(candela)為單位的發光強度。 預設值 - 1.0
方法
- copy ( source : Light ) : Light
- 從source複製 color, intensity 的值到當前光源物件中。
2. AmbientLight
環境光會均勻的照亮場景中的所有物體
注意: 環境光不能用來投射陰影,因為它沒有方向
建構函式
AmbientLight( color : Integer, intensity : Float )
- color - (引數可選)顏色的rgb數值。預設值為 0xffffff。
- intensity - (引數可選)光照的強度。預設值為 1。
屬性
- castShadow : 這個引數在物件構造的時候就被設定成了 undefined 。因為環境光不能投射陰影。
方法與Light相同
示例
無環境光樣式
有環境光樣式
有了環境光, 那麼到處都會有光, 簡單比喻, 白天, 在家裡一個房間, 沒開燈, 太陽光通過地板等物質反射光到房間, 那麼房間也是亮的, 這就是環境光
3. DirectionalLight
平行光是沿著特定方向發射的光。這種光的表現像是無限遠,從它發出的光線都是平行的。常常用平行光來模擬太陽光 的效果; 太陽足夠遠,因此我們可以認為太陽的位置是無限遠,所以我們認為從太陽發出的光線也都是平行的。
注意 : 平行光設定旋轉沒有效果, 它的方向是從一個平行光的位置 position 到 target的位置。 (而不是一個只有旋轉分量的'自由平行光')。
需要注意的屬性
-
position : Vector3
假如這個值設定等於 Object3D.DefaultUp (0, 1, 0),那麼光線將會從上往下照射。
-
target : Object3D
平行光的方向是從它的位置到目標位置。預設的目標位置為原點 (0,0,0)。
注意: 對於目標的位置,要將其更改為除預設值之外的任何位置,它必須被新增到 scene 場景中去。
4. HemisphereLight
光源直接放置於場景之上,光照顏色從天空光線顏色顏色漸變到地面光線顏色
注意 : 半球光不能投射陰影
建構函式
HemisphereLight( skyColor : Integer, groundColor : Integer, intensity : Float )
- skyColor - (可選引數) 天空中發出光線的顏色。 預設值 0xffffff。
- groundColor - (可選引數) 地面發出光線的顏色。 預設值 0xffffff。
- intensity - (可選引數) 光照強度。 預設值 1。
屬性中需要注意的
-
color : Float
在構造時傳遞的天空發出光線的顏色。 預設會建立 Color 並設定為白色(0xffffff)。
-
groundColor : Float
在構造時傳遞的地面發出光線的顏色。 預設會建立 Color 並設定為白色(0xffffff)。
效果
帶有HemisphereLight, 天空發出紅色光
物體本來的顏色在AmbientLight有說明, 棕色光, 兩種相乘, 得到上述顏色
5. PointLight
從一個點向各個方向發射的光源。一個常見的例子是模擬一個燈泡發出的光
建構函式
PointLight( color : Integer, intensity : Float, distance : Number, decay : Float )
- color - (可選引數)) 十六進位制光照顏色。 預設值 0xffffff (白色)
- intensity - (可選引數) 光照強度。 預設值 1
- distance - 這個距離表示從光源到光照強度為0的位置。 當設定為0時,光永遠不會消失(距離無窮大)。預設值 0.
- decay - 沿著光照距離的衰退量。預設值 1。 在 physically correct 模式中,decay = 2。
需要注意的屬性
-
decay : Float
沿著光照距離的衰減量
在 physically correct 模式下,decay 設定為等於2將實現現實世界的光衰減。
預設值為 1 -
distance : Float
如果非零,那麼光強度將會從最大值當前燈光位置處按照距離線性衰減到0。 預設值為 0.0
-
power : Float
光功率
在 physically correct 模式中, 表示以"流明(光通量單位)"為單位的光功率。 預設值 - 4Math.PI
6. RectAreaLight
平面光光源從一個矩形平面上均勻地發射光線。這種光源可以用來模擬像明亮的窗戶或者條狀燈光光源
注意:
- 不支援陰影。
- 只支援 MeshStandardMaterial 和 MeshPhysicalMaterial 兩種材質。
- 你必須在你的場景中加入 不支援陰影。
只支援 MeshStandardMaterial 和 MeshPhysicalMaterial 兩種材質。
你必須在你的場景中加入 RectAreaLightUniformsLib 。
建構函式
RectAreaLight( color : Integer, intensity : Float, width : Float, height : Float )
- color - (可選引數) 十六進位制數字表示的光照顏色。預設值為 0xffffff (白色)
- intensity - (可選引數) 光源強度/亮度 。預設值為 1。
- width - (可選引數) 光源寬度。預設值為 10。
- height - (可選引數) 光源高度。預設值為 10。
示例
7. SpotLight
聚光燈是從一個方向上的一個點發出,沿著一個圓錐體,它離光越遠,它的尺寸就越大
構造器
SpotLight( color : Integer, intensity : Float, distance : Float, angle : Radians, penumbra : Float, decay : Float )
- color - (可選引數) 十六進位制光照顏色。 預設值 0xffffff (白色)。
intensity - (可選引數) 光照強度。 預設值 1。 - distance - 從光源發出光的最大距離,其強度根據光源的距離線性衰減。
- angle - 光線散射角度,最大為Math.PI/2。
- penumbra - 聚光錐的半影衰減百分比。在0和1之間的值。預設為0。
- decay - 沿著光照距離的衰減量。
需要注意的屬性
-
penumbra : Float
聚光錐的半影衰減百分比。在0和1之間的值。 預設值 — 0.0
-
power : Float
光功率: 在 physically correct 模式中, 表示以"流明(光通量單位)"為單位的光功率。 預設值 - 4Math.P
-
target : Object3D
平行光的方向是從它的位置到目標位置.預設的目標位置為原點 (0,0,0)。
注意: 對於目標的位置,要將其更改為除預設值之外的任何位置,它必須被新增到 scene 場景中去
輔助物件
1. DirectionalLightHelper
用於模擬場景中平行光 DirectionalLight 的輔助物件. 其中包含了表示光位置的平面和表示光方向的線段.
建構函式
DirectionalLightHelper( light : DirectionalLight, size : Number, color : Hex )
- light-- 被模擬的光源.
- size -- (可選的) 平面的尺寸. 預設為 1.
- color -- (可選的) 如果沒有設定顏色將使用光源的顏色.
需要注意的屬性
-
lightPlane : Line
包含表示平行光方向的線網格
-
light : DirectionalLight
被模擬的光源.
-
color : hex
建構函式中傳入的顏色值. 預設為 undefined. 如果改變該值, 輔助物件的顏色將在下一次 update 被呼叫時更新
需要注意的方法
-
dispose () : null
銷燬該平行光輔助物件.
-
update () : null
更新輔助物件,與模擬的 directionalLight 光源的位置和方向保持一致
示例
2. HemisphereLightHelper
建立一個虛擬的球形網格 Mesh 的輔助物件來模擬 半球形光源 HemisphereLight
建構函式
HemisphereLightHelper( light : HemisphereLight, sphereSize : Number, color : Hex )
- light -- 被模擬的光源.
- size -- 用於模擬光源的網格尺寸.
- color -- (可選的) 如果沒有賦值輔助物件將使用光源的顏色.
其他屬性和方法類似
示例
天空射下來的是紅光, 地面射上去的是黑光
3. PointLightHelper
建立一個虛擬的球形網格 Mesh 的輔助物件來模擬 點光源 PointLight.
建構函式
PointLightHelper( light : PointLight, sphereSize : Float, color : Hex )
- light -- 要模擬的光源.
- sphereSize -- (可選的) 球形輔助物件的尺寸. 預設為 1.
- color -- (可選的) 如果沒有賦值輔助物件將使用光源的顏色.
其他屬性方法類似
示例
4. RectAreaLightHelper
建立一個表示 RectAreaLight 的輔助物件.
建構函式
RectAreaLightHelper( light : RectAreaLight, color : Hex )
- light -- 被模擬的光源.
- color -- (可選) 如果沒有賦值輔助物件將使用光源的顏色.
其他屬性方法類似
示例
5. SpotLightHelper
用於模擬聚光燈 SpotLight 的錐形輔助物件.
建構函式
SpotLightHelper( light : SpotLight, color : Hex )
- light -- 被模擬的聚光燈 SpotLight .
- color -- (可選的) 如果沒有賦值輔助物件將使用光源的顏色.
示例
陰影
1. DirectionalLightShadow
這是用於在DirectionalLights內部計算陰影
注意: 與其他陰影類不同,它是使用OrthographicCamera來計算陰影,而不是PerspectiveCamera。這是因為來自DirectionalLight的光線是平行的
示例