• Materials are used to put a color on each visible pixel of the geomertries
• 著色器：the algorithms are written in programs called shaders
• 基于一個基本場景（scene遥倦、camera炉奴、controls）創(chuàng)建以下元素：

// 分別創(chuàng)建3個Mesh囱晴，球、平面侨赡、環(huán)脚粟，共用1個Material

/*
  * Objects
*/
const material = new THREE.MeshBasicMaterial()

// 球體
const sphere = new THREE.Mesh(
  new THREE.SphereGeometry(0.5, 16, 16),
  material
)
sphere.position.x = -1.5

// 平面
const plane = new THREE.Mesh(
  new THREE.PlaneGeometry(1, 1),
  material
)

// 環(huán)
const torus = new THREE.Mesh(
  new THREE.TorusGeometry(0.3, 0.2, 16, 32),
  material
)
torus.position.x = 1.5

scene.add(sphere, plane, torus)

// rotate the objects in the tick function

/*
  *Animations
*/
const clock = new THREE.Clock()
const tick = () => {
  let elapsedTime = clock.getElapsedTime()

  // update object
  sphere.rotation.y = 0.1 * elapsedTime
  plane.rotation.y = 0.1 * elapsedTime
  torus.rotation.y = 0.1 * elapsedTime

  sphere.rotation.x = 0.15 * elapsedTime
  plane.rotation.x = 0.15 * elapsedTime
  torus.rotation.x = 0.15 * elapsedTime

  controls.update()
  renderer.render(scene, camera)
  window.requestAnimationFrame(tick)
}
tick()

• materials properties

  • MeshBasicMaterial - 不受光照影響的材質

  /*
    * Textures
  */
  const textureLoader = new THREE.TextureLoader()
  
  const doorColorTexture = textureLoader.load('')
  const doorAlphaTexture = textureLoader.load('')
  const doorAmbientOcclusionTexture = textureLoader.load('')
  const doorHeightTexture = textureLoader.load('')
  const doorNormalTexture = textureLoader.load('')
  const doorMetalnessTexture = textureLoader.load('')
  const doorRoughnessTexture = textureLoader.load('')
  const matCapTexture = textureLoader.load('')
  

  // Most of properties can be written like this
  
  // 寫法1：
  const material = new THREE.MeshBasicMaterial({
    map: doorColorTexture, // 紋理貼圖
    wireframe: true, // show the triangles that compose the geometry
  })
  
  // 寫法2：
  const material = new THREE.MeshBasicMaterial()
  material.map = doorColorTexture
  material.wireframe = true
  

  // Color
  
  // 寫法1：
  const material = new THREE.MeshBasicMaterial({
    color: 'pink'
  })
  
  // 寫法2：
  const material = new THREE.MeshBasicMaterial()
  console.log(material.color); // 打印出一個Color類
  material.color.set('#ff0000')
  
  // 寫法3：
  const material = new THREE.MeshBasicMaterial()
  material.color = new THREE.Color(0xff0000)
  

  // Opacity
  // 使用opacity屬性時缭保，需要同時設置 transparent為true
  // 使用alphaMap屬性時，也需要搭配 transparent = true
  
  const material = new THREE.MeshBasicMaterial({
    color: 'pink'
    transparent: true, 
    opacity: 0.5
  })
  

  // Side - decide whitch side of a face is visible
  
  const material = new THREE.MeshBasicMaterial({
    color: 'pink',
    side: THREE.FrontSide, // 默認
    // side: THREE.BackSide,
    // side: THREE.DoubleSide,
  })
  

  • MeshNormalMaterial - shares common properties width MeshBasicMaterial like wireframe捉片、transparnt平痰、opacity and side，通澄槿遥可用于調試法線宗雇，使用法線向量計算物體表面的顏色

  const material = new THREE.MeshNormalMaterial({
    flatShading: true // 使用平面著色進行渲染
  })
  

  • MeshMatCapMaterial - 投射陰影到物體上

  const material = new THREE.MeshMatCapMaterial({
    matcap: matCapTexture
  })
  

  • MeshDepthMaterial - simply color the geometry in white if it's close to the near and in black if it's close to the far value of the camera
  • MeshLamberMaterial - have new properties related to lights

  const material = new THREE.MeshLambertMaterial()
  
  /*
    * Lights
  */
  // 環(huán)境光
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
  scene.add(ambientLight)
  
  // 點光源
  const pointLight = new THREE.PointLight(0xffffff, 0.5)
  pointLight.position.set(2, 3, 4)
  scene.add(pointLight)
  

  • MeshStandardMaterial - used physically based rendering principles(PBR)，傾向于模仿現(xiàn)實條件

• material屬性中的 map 與 texture

  • map
    • color
    • albedo 反射率
    • applied on the geometry
  • alphaMap
    • grayscale image 灰度圖
    • white visible
    • black not visible
  • displacementMap
    • height
    • grayscale image 灰度圖
    • move the vertices to create some relief(高低莹规、凹凸)
    • need enough subdivision(細分)
  • normalMap
    • normal
    • add details, doesn't need subdivision
    • the vertices won't move
    • lure the light about the face orientation 將光線引向目標方向
    • better performances than adding a height texture with a lot of subdivision
  • aoMap
    • occlusion 環(huán)境吸收
    • grayscale image 灰度圖
    • add fake shadows in crevices 在裂縫中添加假陰影
    • not physically accurate 不是自然地赔蒲，不準確
    • helps to create contrast and see details
  • metalnessMap
    • grayscale image 灰度圖
    • white is metallic 金屬的，black is non-metallic 非金屬的
    • mostly for reflection 光反射
  • roughnessMap
    • grayscale image 灰度圖
    • mostly for light dissipation 消散良漱、損耗
    • white is rough 粗糙舞虱，black is smooth 光滑
    • in duo with metalness 與金屬質感相得益彰