Three.Light

• Three.Light
  • 燈光
    • 1. Light
    • 2. AmbientLight
    • 3. DirectionalLight
    • 4. HemisphereLight
    • 5. PointLight
    • power : Float
    • 6. RectAreaLight
    • 7. SpotLight
  • 輔助物件
    • 1. DirectionalLightHelper
    • 2. HemisphereLightHelper
    • 3. PointLightHelper
    • 4. RectAreaLightHelper
    • 5. SpotLightHelper
  • 陰影
    • 1. DirectionalLightShadow

首先展示的是使用半球光參考的效果, 光源直接放置于場景之上，光照顏色從天空光線顏色顏色漸變到地面光線顏色，光照主要有

• 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的位置， (而不是一個只有旋轉分量的'自由平行光')，

需要注意的屬性

1. position : Vector3

   假如這個值設定等于 Object3D.DefaultUp (0, 1, 0),那么光線將會從上往下照射，

2. 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，

需要注意的屬性

1. decay : Float

   沿著光照距離的衰減量
   在 physically correct 模式下，decay 設定為等于2將實作現實世界的光衰減，
   預設值為 1

2. distance : Float

   如果非零，那么光強度將會從最大值當前燈光位置處按照距離線性衰減到0， 預設值為 0.0

3. 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的光線是平行的

示例

標籤：JavaScript

上一篇：分享交流一些HTML5的新增元素

下一篇：JS學習筆記01-變數