iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 10
1

今天將介紹四種基礎光源:「環境光(AmbientLight)、點光源(PointLight)、聚光燈(SpotLight)、平行光(DirectionalLight)」,並透過昨天實作的苦力怕來觀察每一種光源之間的交互影響。

09_front

Photo by Alex Iby on Unsplash


這是本系列第 09 篇,如果還沒看過第 08 篇可以點以下連結前往:

用 Three.js 來當個創世神 (08):專案實作#4 - 苦力怕的材質與貼圖


光源介紹

在 Three.js 中有以下幾種基礎光源:

光源 說明 圖示
AmbientLight 環境光。散佈在環境中的光,會將光源的顏色疊加到場景中所有物體上,不能創造陰影,通常拿來增加一些柔性的光線補強色彩。 ambientLight
PointLight 點光源。從特定一點向所有方向發射光線,可以投射陰影。類似燈泡、螢火蟲的概念。 PointLight
SpotLight 聚光燈。從特定一點對某個方向發射錐形的光線,可以投射陰影。類似手電筒、舞台聚光燈的概念。 SpotLight
DirectionalLight 平行光、無限光。從一個二維平面發射光線,光線彼此平行,可以投射陰影,類似太陽光的概念。 DirectionalLight

基礎光源範例

這邊我們利用專案來呈現四種光源間的交互影響,請參考完整原始碼成果展示

09_demo

苦力怕:神說,要有光!要有更多的光!

在這次範例中也透過 dat.GUI 加入了四種光源的開關,讀者可以實際透過每一種光源的開關,感受它們之間是如何彼此互補達到場景中比較協調的光照。

以下分別為各種光源的使用方法:

環境光

// 設置環境光 AmbientLight
let ambientLight = new THREE.AmbientLight(0xeeff00)
scene.add(ambientLight)

點光源

// 設置點光源 PointLight
let pointLight = new THREE.PointLight(0xeeff00)
pointLight.position.set(-10, 20, 20)
pointLight.castShadow = true
scene.add(pointLight)
let pointLightHelper = new THREE.PointLightHelper(pointLight)
scene.add(pointLightHelper)

聚光燈

// 設置聚光燈 SpotLight
let spotLight = new THREE.SpotLight(0xeeff00)
spotLight.position.set(-10, 20, 20)
spotLight.castShadow = true
scene.add(spotLight)
let spotLightHelper = new THREE.SpotLightHelper(spotLight)
scene.add(spotLightHelper)

平行光

// 設置平行光 DirectionalLight
let directionalLight = new THREE.DirectionalLight(0xeeff00)
directionalLight.position.set(-10, 20, 20)
directionalLight.castShadow = true
scene.add(directionalLight)
let directionalLightHelper = new THREE.DirectionalLightHelper(
  directionalLight
)
scene.add(directionalLightHelper)

以上四種光源的設定上都差不多,關於每種光源的屬性,除了環境光只能設定顏色(color)與強度(intensity)之外,其他每一種光源還有像是距離(distance)、投射陰影效果(castShadow)等等屬性,或像是聚光燈可以自訂射出光束的角度(angle)及目標(target),一般而言大多使用預設值,但如果需要細調,讀者可依照自己需求根據官網文件添加。

後三者都有 helper 可以用來輔助開發,了解目前光源相關的設定是否正確。

關於 castShadow 的投射陰影效果,除了光源需設定外,還有物體與渲染器需要設定,這部分留到明天的專案實作的光影效果講解。

今日小結

今天介紹了四種基礎光源,分別有環境光、點光源、聚光燈、平行光,也利用專案實例展示幾種光源間的差異性與如何彼此互補,明天會利用今天學習到的基礎光源來實作專案中的光影效果,我們明天見!

最後再附上完整原始碼成果展示


上一篇
用 Three.js 來當個創世神 (08):專案實作#4 - 人物材質與貼圖
下一篇
用 Three.js 來當個創世神 (10):專案實作#5 - 光影效果
系列文
用 Three.js 來當個創世神31

尚未有邦友留言

立即登入留言