DAY 17. Three.js 光源 Light

在3D的應用當中, 光源Light是相當普遍的運用, 如果該3D場景Scene沒有光源, 通常會是黑漆漆的一片, 看不到東西。

在three.js中有以下幾種預設光源可供使用

• 環境光 AmbientLight
• 點光源 PointLight
• 聚光燈 SpotLight
• 方向光 DirectionLight
• 半球光 HemisphereLight
• 面光源 AreaLight
• 鏡頭眩光 LensFlare

其中在一個場景中最基本的光線就是環境光AmbientLight, 我們用該光源來添加一些顏色以及弱化陰影, 但由於環境光AmbientLight不會真正的產生光線, 因此通常會搭配其他光源使用。

參考以下範例, 了解幾個常用的光源

// 首先建立一個最基本的場景, 其中包含一個方塊

let scene = new THREE.Scene()

let camera = new THREE.PerspectiveCamera(
  75, window.innerWidth / window.innerHeight, 0.1, 1000
)

camera.position.x = 3
camera.position.y = 3
camera.position.z = 3
camera.lookAt(new THREE.Vector3(0, 0, 0))

let renderer = window.WebGLRenderingContext ? 
               new THREE.WebGLRenderer() : new THREE.CanvasRenderer()

renderer.setSize(window.innerWidth, window.innerHeight)

document.body.appendChild(renderer.domElement)

let geometry = new THREE.CubeGeometry(1, 1, 1)

// 這裡我們選用一個能夠對光源產生反應的材質
// 更多關於材質的介紹將會在之後提及
let material = new THREE.MeshPhongMaterial({
  color: '#ff0000'
})

let cube = new THREE.Mesh(geometry, material)

scene.add(cube)

renderer.render(scene, camera)

接著我們在render之前加入環境光AmbientLight, 觀察變化

// ... 略

let ambientLight = new THREE.AmbientLight('#0c0c0c')

scene.add(ambientLight)

renderer.render(scene, camera)

觀察變化後可以發現, 正如先前所說, 畫面上並沒有產生甚麼變化
我們接著加入第二光源, 聚光燈SpotLight

// ... 略

let ambientLight = new THREE.AmbientLight('#0c0c0c')

scene.add(ambientLight)

let spoltLight = new THREE.SpotLight(0xFFF000)

// 設定光源位置
spoltLight.position.set(3, 3, 3)

// 設定光源目標
spoltLight.target = cube

scene.add(spoltLight)

renderer.render(scene, camera)

接著我們就能看到畫面中的cube終於出現了鮮明的紅色
為了讓效果更加明顯, 調整render方式

// renderer.render(scene, camera)
render()

function render() {
  cube.rotation.x -= .01
  cube.rotation.y -= .01
  cube.rotation.z -= .01
  renderer.render(scene, camera)
  requestAnimationFrame(render)
}

這裡我們調整render方式, 賦予cube旋轉效果, 明顯看出各個面對於光餘所產反映
緊接著我們再加入另一個光源, 點光源PointLight

let spoltLight = new THREE.SpotLight(0xFFF000)

// 設定光源位置
spoltLight.position.set(3, 3, 3)

// 設定光源目標
spoltLight.target = cube

// 關閉SpotLight來觀察PointLight
// scene.add(spoltLight)

let pointLight = new THREE.PointLight({
  color: '#ccffcc',
  distance: 100  // 光線照亮距離
})

// 點光源, 光線強度
pointLight.intensity = 5

// 點光源位置
pointLight.position.set(3, 0, 0)

scene.add(pointLight)

// renderer.render(scene, camera)
render()

function render() {
  // 光源能夠在場景中移動
  pointLight.rotation.y += .01
  
  cube.rotation.x -= .01
  cube.rotation.y -= .01
  cube.rotation.z -= .01
  renderer.render(scene, camera)
  requestAnimationFrame(render)
}

JSBin Demo

以上三個光源是在3D場景中最常被使用到的
使用光源的時候主要注意光源的位置, 以及場景中幾何所使用的材質是否能夠對光源產生反應。

更多關於燈光的介紹與使用請查看，官方文件