three.js學習4_光源

時間 2020-09-21

標籤 three.js 學習光源欄目 JavaScript 简体版

原文原文鏈接

Three.Light

Three.Light

首先展現的是使用半球光引用的效果, 光源直接放置於場景之上，光照顏色從天空光線顏色顏色漸變到地面光線顏色。光照主要有函數

AmbientLight 環境光

DirectionalLight 平行光

HemisphereLight 半球光

PointLight 點光源

RectAreaLight 平面光光源

SpotLight 聚光燈

因爲three.js可視化仍是不夠完善, 所以有了衆多光源的輔助對象, 每一種燈光都有本身的特性以及共性, 大量的燈光能夠產生陰影, 後面一一介紹orm

燈光

Light有不少相關內容, 首先先看下衆多燈光的效果對象

1. Light

光源的基類 - 全部其餘的光類型都繼承了該類描述的屬性和方法blog

Light屬性繼承

color : Color
- 光源的顏色。
- 若是構造的時候沒有傳遞，默認會建立一個新的 Color 並設置爲白色。
intensity : Float
- 光照的強度，或者說能量。
- 在 physically correct 模式下, color 和強度的乘積被解析爲以坎德拉（candela）爲單位的發光強度。默認值 - 1.0

方法three

copy ( source : Light ) : Light
- 從source複製 color, intensity 的值到當前光源對象中。

2. AmbientLight

環境光會均勻的照亮場景中的全部物體get

注意: 環境光不能用來投射陰影，由於它沒有方向it

構造函數io

AmbientLight( color : Integer, intensity : Float )ast

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 場景中去