DAY 19. Three.js 材質 Material

材質 Material

3D場景中所看到的任何物件都是幾何Geometry加上材質Material的呈現

首先來看看我們有哪些基本材質Material可以使用

• 基本材質 MeshBasicMaterial
• 深度材質 MeshDepthMaterial
• 簡單 MeshNormalMaterial
• 面材質 MeshFaceMaterial
• 朗伯材質 MeshLambertMaterial
• 馮森材質 MeshPhongMaterial
• 著色器材質 ShaderMaterial

在開始介紹常用的材質Material之前, 先來了解每個材質共有的屬性

• ID 該材質ID, 當材質被建立時賦予
• name 該材質名稱, 可以在建立材質時賦予name, 方便之後查找
• opacity 透明度, 範圍 0 ~ 1, 需搭配 transparent屬性使用
• transparent (布林), 是否透明
• overdraw 當你使用CanvasRanderer時, 可以設此屬性為true來提高品質
• visible (布林), 是否可見
• side 材質要渲染到物件的(後/裡)面BackSide或是(正/外)面FrontSite
• needsUpdate 當材質被更新時, 設此屬性為true來告訴three此材質需要更新

接著我們來看看幾個常用的材質

MeshBasicMaterial

基本材質MeshBasicMaterial是個簡單的顏色材質, 此材質並不會對光線產生反應, 如果你需要一個會對光線產生反應的材質, 就不該選擇基本材質。

let scene = new THREE.Scene()
let sceneWidth = window.innerWidth
let sceneHeight = window.innerHeight
let camera = this.camera = new THREE.PerspectiveCamera(
      75, sceneWidth / sceneHeight, 0.1, 1000
    )

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

renderer.setSize(sceneWidth, sceneHeight)
renderer.setClearColor(new THREE.Color('rgb(100, 100, 100)'))
// 以上內容所有範例共用, 之後會省略...

// 這裡宣告了一個基本材質, 將會使用於cube
// 這個材質將會是黃色, 並且以wireframe方式呈現
let material = new THREE.MeshBasicMaterial({
  color: 0xFFF000,  // 物件顏色
  wireframe: true      // 是否以 wireframe 方式呈現
})

let cube = new THREE.Mesh(
    new THREE.CubeGeometry(3, 3, 3), material
  )

scene.add(cube)

// 以下內容所有範例共用, 之後會省略...
camera.position.x = 5
camera.position.y = 5
camera.position.z = 5
camera.lookAt(scene.position)
document.body.appendChild(renderer.domElement)
renderer.render(scene, camera)

JSBin Demo
除了範例中設定的兩個屬性以外, 基本材質還有幾個較少使用的屬性

MeshLambertMaterial

朗伯材質MeshLambertMaterial, 這是一個黯淡, 不光亮的材質, 可對光源產生反應, 一般使用方式很簡單, 只需要定義顏色即可

// 以上略 ...

let spotLight = new THREE.SpotLight(0xffffff)
spotLight.position.set( 100, 1000, 200 );
scene.add(spotLight)

let material = new THREE.MeshLambertMaterial({
    color: 0xFF0000
})

let cube = new THREE.Mesh(
    new THREE.CubeGeometry(3, 3, 3), material
)

scene.add(cube)
// 以下略 ...

JSBin Demo
這個範例中, 添加了一個白色光源的spotLight來照亮cube, 若沒有該光源存在, cube就只會是一片黑, 無法呈現出定義的紅色。

MeshPhongMaterial

馮森材質MeshPhongMaterial, 這是一個光亮平滑的材質, 且可對光源產生反應, 使用方式一樣很簡單, 就跟朗伯材質MeshLambertMaterial一樣

// 以上略 ...

let spotLight = new THREE.SpotLight(0xffffff)
spotLight.position.set( 100, 1000, 200 );
scene.add(spotLight)

let material = new THREE.MeshPhongMaterial({
    color: 0x00FF00
})

let cube = new THREE.Mesh(
    new THREE.CubeGeometry(3, 3, 3), material
)

scene.add(cube)

// 以下略 ...

JSBin Demo
這個範例與上一個僅差別於材質名稱以及顏色不同, 但應該可以感受到該物件相較於上個範例較於平滑, 在實際的情況中場景內的光源會更多, 使用的材質也可能不只是單一顏色, 在那樣的情況下差距會更明顯。

以上三個材質是一般情況下最常用到的材質Material, 在實際的情況下物件除了單一顏色外很有可能用圖片代替, 而該圖片在材質Material的應用層明中稱之為紋理Texture, 我們將會另開一個主題說明有關紋理Texture的使用。