Three.js 之材质

Three.js 之材质

材质的作用是在几何体表面进行渲染，可以渲染特定的颜色或者图片。

材质种类

MeshBasicMaterial

基础材质，不会被光源所影响。

MeshDepthMaterial

材质的亮度由材质和相机之间的距离决定，一般和其他材质一起使用，通过 blend properties 混合不同的材质

THREE.MeshLambertMaterial

基础材质，会被光源所影响

THREE.MeshPhongMaterial

可以控制反光的材质，会有一种被耀眼的光照射到的感觉

属性：

• emmisive：材质反光的颜色
• emissiveIntensity：材质反光的强度
• specular：被照射到的光的颜色
• shininess：反光的亮度

THREE.MeshToonMaterial

卡通🦊、或者金属样式的材质，可以被光源影响，有阴影效果

THREE.MeshStandardMaterial

MeshPhongMaterial 和 MeshToonMaterial 的合并体，既反光，又有金属般的感觉

属性：

• metalness：定义有多么像金属材质，值为 0 - 1
• roughness：定义被光照射到以后的效果，值为 0 - 1，为 0 时有镜子的效果，为 0 时则灯光被扩散开

THREE.MeshPhysicalMaterial

和 MeshStandardMaterial 类似的材质，可以添加一层外套（coat）

属性：

• clearCoat：外套的颜色
• clearCoatRoughness：外套的颜色的强度

THREE.ShadowMaterial

ShadowMaterial 是一种用来展示阴影的材质，它会把被光源照射到的阴影显示出来

THREE.ShaderMaterial

可以自定义材质，需要用 GLSL 写 shader。

可以使用 THREE.CustomShader 开源项目来实现。

THREE.LineBasicMaterial

只能应用于 Three.Line 几何体（线）中，可以设置线的颜色

THREE.LineDashedMaterial

只能应用于 Three.Line 几何体（线）中， 是一条虚线

一个 Mesh 同时应用多个材质

可以给 Mesh 不同的面绘制不同的材质，只需要在创建 Mesh 时传递对应的材质就可以。

  const mat1 = new THREE.MeshBasicMaterial({ color: 0x777777 })
  const mat2 = new THREE.MeshBasicMaterial({ color: 0xff0000 })
  const mat3 = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
  const mat4 = new THREE.MeshBasicMaterial({ color: 0x0000ff })
  const mat5 = new THREE.MeshBasicMaterial({ color: 0x66aaff })
  const mat6 = new THREE.MeshBasicMaterial({ color: 0xffaa66 })
  const material = [mat1, mat2, mat3, mat4, mat5, mat6]
  
  // 大小为 2，后面的三个 `10` 指的是宽、高、深度分别分成多少份
  const cubeGeom = new THREE.BoxGeometry(2, 2, 2, 10, 10, 10)
  // Mesh 一共有 6 个面，对应 6 个材质，如果传少了则用默认材质
  const cubeMesh = new THREE.Mesh(cubeGeom, material)

THREE.Mesh 和 SceneUtils.createMultiMaterialObject() 都可以给一个 mesh 同时创建不同面的材质，SceneUtils.createMultiMaterialObject() 一般用于当 mesh 是通过引入资源文件时使用。给一个几何体添加不同的材质，Three 内部实际上复制了多个一样的几何体，然后给每个几何体都应用易总材质。