Three.js之材质篇

材质种类

1. MeshBasicMaterial
   为几何体赋予一种简单的颜色，或者显示几何体的线框。
   属性：

   • color
   • wireframe
   • wireframeLinewidth
   • wireframeLinecap：线段端点如何显示，选项有：butt（平）、round、square（默认是round）。WebGLRenderer 不支持该属性。
   • wireframeLinejoin：线段连接点如何显示，选项有：round、bevel（斜角）、miter（尖角）。WebGLRenderer 不支持该属性。
   • shading：着色模式，选项有：THREE.SmoothShading、THREE.FlatShading。
   • vertexColors：为每个顶点定义不同的颜色，在 CanvasRenderer 中不起作用。
   • fog：指示当前是否会受全局雾化效果设置的影响。

2. MeshDepthMaterial
   使用这种材质的物体外观不是由光照或材质属性决定的，而是由物体到相机的距离决定。可以与其他材质结合，创建逐渐消失的效果。
   控制线框的属性：

   • wireframe
   • wireframeLinewidth

   可以通过设置相机的 near 和 far 值，控制物体消失速度。near 和 far 的差值越大，物体消失效果越不明显，反之，消失效果会更明显。

   var cubeMaterial = new THREE.MeshDepthMaterial();
   var colorMaterial = new THREE.MeshBasicMaterial({color:0x00ff00, transparent:true, blending:THREE.MultiplyBlending});
   var cube = new THREE.SceneUtils.createMultiMaterialObject(cubeGeometry, [colorMaterial, cubeMaterial]);
   cube.children[1].scale.set(0.99, 0.99, 0.99); // 避免渲染遮挡而造成的闪烁
   

3. MeshNormalMaterial
   法向量决定光的发射方向、光照计算、阴影等。使用法向量为物体表面上色。
   属性：

   • wireframe
   • wireframeLinewidth
   • shading

   for (var f = 0, f1 = sphere.geometry.faces.length; f < f1; f++) {
       var face = sphere.geometry.faces[f];
       var arrow = new THREE.ArrowHelper(face.normal, face.centroid, 2, 0x3333ff);
       sphere.add(arrow);
   }
   

4. MeshFaceMaterial
   可以为几何体的每一个面指定不同的材质。

   var matArray = [];
   matArray.push(new THREE.MeshBasicMaterial({color:0xffff00}));
   matArray.push(new THREE.MeshBasicMaterial({color:0x00ff00}));
   matArray.push(new THREE.MeshBasicMaterial({color:0x00ffff}));
   matArray.push(new THREE.MeshBasicMaterial({color:0x00ff00}));
   matArray.push(new THREE.MeshBasicMaterial({color:0xffff00}));
   matArray.push(new THREE.MeshBasicMaterial({color:0x00ffff}));
   
   var faceMaterial = new THREE.MeshFaceMaterial(matArray);
   var cubeGeometry = new THREE.CubeGeometry(3, 3, 3);
   var cube = new THREE.Mesh(cubeGeometry, faceMaterial);
   

5. MeshLambertMaterial
   考虑光照的影响，适用于不发光、不闪亮的物体。
   基本属性：

   • color, opacity, shading, blending, depthTest, depthWrite, wireframe, wireframeLinewidth, wireframeLinecap, wireframeLinejoin, vertexColors, fog
     独特属性：
   • ambient：和 AmbientLight 光源一起使用，颜色与 AmbientLight 的颜色相乘。默认是白色。
   • emissive：该材质发射的颜色，不受其他光照影响，默认是黑色。

6. MeshPhongMaterial
   考虑光照的影响，适用于具有光泽感的物体。
   基本属性：

   • color, opacity, shading, blending, depthTest, depthWrite, wireframe, wireframeLinewidth, wireframeLinecap, wireframeLinejoin, vertexColors, fog
     独特属性：
   • ambient
   • emissive
   • specular：指定光亮程度和高光部分的颜色。
   • shininess：指定高光部分的亮度。默认是30。

7. ShaderMaterial
   使用自定义的着色器程序，直接控制顶点的放置方式，以及像素的着色方式。
   属性：

   • wireframe
   • wireframeLinewidth
   • shading
   • vertexColor
   • fog

   独特属性：

   • fragmentShader：定义每个像素的颜色。
   • vertexShader：允许修改每个顶点的位置。
   • uniforms：向着色器发送消息。
   • defines：设置着色器中的全局变量。
   • attributes：修改每个顶点和片段，传递位置数据和法向量等。
   • lights：定义光照数据是否传递给着色器，默认是 false。

8. LineBasicMaterial
   用于 THREE.Line 几何体，创建着色的直线。
   基本属性：

   • color
   • lineWidth
   • LineCap：butt、round、square。默认是 round。WebGLRenderer 不支持该属性。
   • LineJoin：round、bevel（斜切）、miter（尖角）。默认是 round。WebGLRenderer 不支持该属性。
   • vertexColors：允许为每个顶点指定颜色。
   • fog：是否受全局雾化效果的影响。

9. LineDashedMaterial
   与 LineBasicMaterial 类似，但增加了控制短划线和间隔长度的属性。
   独特属性：

   • scale：缩放 dashSize 和 gapSize，如果 scale < 1，则增加长度。
   • dashSize：短线的长度。
   • gapSize：间隔的长度。