three.js - Materials

• 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）创建以下元素：

// 分别创建3个Mesh，球、平面、环，共用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
)

// 环
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
  */
  // 环境光
  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)，倾向于模仿现实条件

• 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 环境吸收
    • 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 与金属质感相得益彰