iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 17
1
Modern Web

WebGL 與 Three.js 初探系列 第 17

[Day17] Three.js 光源 / 陰影

前幾天我們介紹了 three.js 中的光源,並且介紹了 three.js 中內建的光源系統。今天讓我們來深入一下這些 API 吧!

將光源加入場景

three.js 中的光源都繼承自 light 這個物件,同時也是 Object3D 物件,所以可以透過 scene.add(light) 的方式加入場景,交給 three.js 計算效果。

設置陰影

注意:陰影的繪製需要大量的運算,請依照實際的使用狀況做調整及優化

renderer 必須要開啟繪製功能,通常都是用 light.castShadow = true 的方式來開啟,同時也要將需要繪製陰影的 Object3D 物件的屬性 object.castShadow 設定為 true,代表物體可以擋住光線來產生陰影,不過如果需要產生陰影,就必須再使用 object.receiveShadow 這個屬性。

Day17 待補...


上一篇
[Day16] three.js 番外篇 - 從程式碼當中學習
下一篇
[Day18] Three.js 實戰(1) - 全景圖實作
系列文
WebGL 與 Three.js 初探30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言