ThreeJS学习笔记 - 2.材质

常用的材质

基本材质

• ​MeshBasicMaterial​

  基础网格材质一种简单的材质，不受光照影响。适用于需要恒定颜色或纹理的对象。
  用于：显示纯色或纹理，不需要光照效果。

  属性解释：

  • color：材质的颜色，使用十六进制表示（例如 0x00ff00 表示绿色）。
  • map：用于纹理贴图的 THREE.Texture 对象。
  • wireframe：布尔值，是否以线框模式渲染。

  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  

受光照影响的材质

• ​MeshLambertMaterial​
  Lambert 网格材质，一种基于 Lambert 着色模型的材质，受光照影响，具有漫反射效果。
  用于：需要简单光照效果的对象，如漫反射表面。

  属性解释：

  • color：材质的颜色。
  • emissive：自发光颜色。
  • map：用于纹理贴图的 THREE.Texture 对象。
  • wireframe：布尔值，是否以线框模式渲染。

  const material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
  

• ​MeshPhongMaterial​

  Phong 网格材质，一种基于 Phong 着色模型的材质，受光照影响，具有高光和反射效果。
  用于：需要高光和反射效果的对象，如金属表面。

  属性解释：

  • color：材质的颜色。
  • emissive：自发光颜色。
  • specular：高光颜色。
  • shininess：高光的亮度。
  • map：用于纹理贴图的 THREE.Texture 对象。
  • wireframe：布尔值，是否以线框模式渲染。

  const material = new THREE.MeshPhongMaterial({ color: 0x00ff00, shininess: 100 });
  

• ​MeshStandardMaterial​

  标准网格材质，一种基于物理渲染（PBR）的材质，具有更真实的光照效果。
  用于：需要真实光照效果的对象，如金属和非金属表面。

  属性解释：

  • color：材质的颜色。
  • emissive：自发光颜色。
  • metalness：金属度，范围为 0 到 1。
  • roughness：粗糙度，范围为 0 到 1。
  • map：用于纹理贴图的 THREE.Texture 对象。
  • wireframe：布尔值，是否以线框模式渲染。

  const material = new THREE.MeshStandardMaterial({ color: 0x00ff00, metalness: 0.5, roughness: 0.5 });
  

• ​MeshPhysicalMaterial​

  物理网格材质，一种扩展自 MeshStandardMaterial 的材质，增加了对透明度和折射率的支持。
  用于：需要更复杂光照效果的对象，如透明或半透明材料。

  属性解释：

  • color：材质的颜色。
  • emissive：自发光颜色。
  • metalness：金属度，范围为 0 到 1。
  • roughness：粗糙度，范围为 0 到 1。
  • clearcoat：清漆层强度，范围为 0 到 1。
  • clearcoatRoughness：清漆层的粗糙度，范围为 0 到 1。
  • reflectivity：反射率，范围为 0 到 1。
  • transparency：透明度，范围为 0 到 1。
  • map：用于纹理贴图的 THREE.Texture 对象。
  • wireframe：布尔值，是否以线框模式渲染

  const material = new THREE.MeshPhysicalMaterial({ color: 0x00ff00, metalness: 0.5, roughness: 0.5, clearcoat: 1.0 });
  

特殊材质

• ​MeshDepthMaterial​

  深度网格材质，一种用于渲染深度信息的材质。
  用于：阴影映射或其他需要深度信息的效果。

  属性解释：

  • depthPacking：深度打包格式，默认为 THREE.BasicDepthPacking。
  • wireframe：布尔值，是否以线框模式渲染。

  const material = new THREE.MeshDepthMaterial();
  

• ​MeshNormalMaterial​

  法线网格材质，一种用于显示法线信息的材质。
  用于：调试法线或创建特殊效果。

  属性解释：

  • flatShading：布尔值，是否使用平面着色。
  • wireframe：布尔值，是否以线框模式渲染

  const material = new THREE.MeshNormalMaterial();
  

• ​MeshToonMaterial​

  卡通网格材质，一种用于创建卡通渲染效果的材质。
  用于：需要卡通或非真实感渲染的对象。

  属性解释：

  • color：材质的颜色。
  • gradientMap：用于卡通效果的渐变贴图。
  • wireframe：布尔值，是否以线框模式渲染。

  const material = new THREE.MeshToonMaterial({ color: 0x00ff00 });
  

点和线材质

• ​PointsMaterial​

  点材质，一种用于渲染点的材质。
  用于：粒子系统或散点图。

  属性解释：

  • color：材质的颜色。
  • size：点的大小。
  • map：用于纹理贴图的 THREE.Texture 对象。
  • sizeAttenuation：布尔值，是否根据距离衰减点的大小。

  const material = new THREE.PointsMaterial({ color: 0x00ff00, size: 1 });
  

• ​LineBasicMaterial​

  基础线材质，一种用于渲染线段的简单材质。
  用于：显示线框或路径。

  属性解释：

  • color：材质的颜色。
  • linewidth：线的宽度。
  • linecap：线段端点的样式，可以是 'butt'、'round' 或 'square'。
  • linejoin：线段连接处的样式，可以是 'round'、'bevel' 或 'miter'。

  const material = new THREE.LineBasicMaterial({ color: 0x00ff00 });
  

• ​LineDashedMaterial​

  虚线材质，一种用于渲染虚线的材质。
  用于：显示虚线路径。

  属性解释：

  • color：材质的颜色。
  • linewidth：线的宽度。
  • dashSize：虚线段的长度。
  • gapSize：虚线段之间的间隔长度。

  const material = new THREE.LineDashedMaterial({ color: 0x00ff00, dashSize: 3, gapSize: 1 });