threejs 材质

一、材质种类：

• MeshBasicMaterial：为几何体赋予一种简单的颜色，或者显示几何体的线框
• MeshDepthMaterial：根据网格到相机的距离，该材质决定如何给网格染色
• MeshNormalMaterial：根据物体表面的法向量计算颜色
• MeshFaceMaterial：这是一种容器，可以在该容器中为物体的各个表面上设置不同的颜色
• MeshLambertMaterial：考虑光照的影响，可以创建颜色暗淡，不光亮的物体
• MeshPhongMaterial：考虑光照的影响，可以创建光亮的物体
• ShaderMaterial：使用自定义的着色器程序，直接控制顶点的放置方式，以及像素的着色方式。
• LineBasicMaterial：可以用于THREE.Line几何体，从而创建着色的直线
• LineDashedMaterial：类似与基础材质，但可以创建虚线效果

二、基本图形

• 1、MeshBasicMaterial：不考虑光照的影响。

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

两种设置属性的方式：

//1.构造函数
var meshMaterial = new THREE.MeshBasicMaterial({color:0xffccff});
//2属性
meshMaterial.visible = false;

• 2、MeshDepthMaterial

使用这种材质的物体，其外观不是由光照或某个材质属性决定的；而是由物体到相机的距离决定的。可以将这种材质与其他材质相结合，从而很容易创建逐渐消失的效果。

只有两个控制线框的属性：
wireframe
wireframeLinewidth

可以通过设置相机的near和far的值，来控制创建中使用这种材质的物体的消失速度。如果near和fat之间的差值越大，那么物体远离相机时，只会稍微消失一点；反之，物体消失的效果非常明显。

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

法向量的作用： 决定光的发射方向、在计算光照、阴影时提供信息、为物体表面上色。法向量所指的方向决定每个面从MeshNormalMaterial材质获取的颜色。

属性：
wireframe
wireframeLinewidth
shading

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

在球体的每个面上添加了一个长度为2，颜色为0x3333ff的箭头

• 4、MeshFaceMaterial

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

假设有一个正方体，可以为每个面指定不同的颜色。

var matArray = [];
matArray.push(new THREE.MeshBasicMaterial({color:0x00ff00}));
matArray.push(new THREE.MeshBasicMaterial({color:0x00ff00}));
matArray.push(new THREE.MeshBasicMaterial({color:0x00ff00}));
matArray.push(new THREE.MeshBasicMaterial({color:0x00ff00}));
matArray.push(new THREE.MeshBasicMaterial({color:0x00ff00}));
matArray.push(new THREE.MeshBasicMaterial({color:0x00ff00}));
 
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、wireframeLineWith、wirefLinecap、wireframeLinejoin、vertexColors、fog。

独特属性：

ambient：和AmbientLight光源一起使用。该颜色会与AmbientLight光源的颜色相乘。默认是白色。
emissive：该材质发射的属性。不像是光源，只是一种纯粹的、不受其他光照影响的颜色。默认是黑色。

• 6、MeshPhongMaterial

基本属性：
color、opacity、shading、blending、depthTest、depthWrite、wireframe、wireframeLineWith、wirefLinecap、wireframeLinejoin、vertexColors、fog。

独特属性：

ambient
emissive
specular：指定该材质的光亮程度及其高光部分的颜色。如果将他设置成跟color属性相同的颜色，将会得到一种更加类似金属的材质。如果设置为灰色，材质将变得更像塑料。
shininess：指定高光部分的亮度。默认是30.

• 7、ShaderMaterial

属性：
wireframe
wireframeLinewidth
shading
vertexColor
fog：指示当前是否会受全局雾化效果设置的影响。

独特属性：

fragmentShader：定义每个传入的像素的颜色。
vertexShader：允许你修改每一个传入的顶点的位置
uniforms：该属性可以向你的着色器发送消息。将同样的信息发送到每一个顶点和片段。
defines：该属性可以转换为vertexShader和fragmentShader里的#define代码。该属性可以用来设置着色器程序里的一些全局变量。
attributes：该属性可以修改每个顶点和片段。常用来传递位置数据和法向量相关的数据。如果要用这个属性，辣么你要为几何体中的所有顶点提供信息。
lights：定义光照数据是否传递给着色器。默认是false。

独特属性：

fragmentShader：定义每个传入的像素的颜色。
vertexShader：允许你修改每一个传入的顶点的位置
uniforms：该属性可以向你的着色器发送消息。将同样的信息发送到每一个顶点和片段。
defines：该属性可以转换为vertexShader和fragmentShader里的#define代码。该属性可以用来设置着色器程序里的一些全局变量。
attributes：该属性可以修改每个顶点和片段。常用来传递位置数据和法向量相关的数据。如果要用这个属性，辣么你要为几何体中的所有顶点提供信息。
lights：定义光照数据是否传递给着色器。默认是false。

• 8、LineBasicMaterial

基本属性：

color
lineWidth
LineCap：butt、round、square。默认是round。WebGLRenderer不支持该属性。
LineJoin：round、bevel（斜切）、miter（尖角）。默认是round。WebGLRenderer不支持该属性。
vertexColors：该属性值设置为 THREE.VertexColors值时，就可以为每个顶点指定一种颜色。
fog：指定当前物体是否受全局雾化效果的影响。

• 9、LineDashedMaterial

和LineBasicMaterial有着一样的属性，但是有几个额外的属性，可以用来定义短划线长度和短划线中间空格长度的属性。

独特属性：
scale：缩放dashSize和gapSize。如果scale<1，则dashSize和gapSize就会增大。
dashSize：短线划的长度
gapSize：间隔的长度