Three.js之材质篇

发布时间:2020年05月29日评论数：抢沙发阅读数： 5166

材质种类：

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: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、wireframeLineWith、wirefLinecap、wireframeLinejoin、vertexColors、fog。

独特属性：

ambient：和AmbientLight光源一起使用。该颜色会与AmbientLight光源的颜色相乘。默认是白色。

emissive：该材质发射的属性。不像是光源，只是一种纯粹的、不受其他光照影响的颜色。默认是黑色。

6.MeshPhongMaterial

考虑光照的影响，可以创建光亮的物体

基本属性：

color、opacity、shading、blending、depthTest、depthWrite、wireframe、wireframeLineWith、wirefLinecap、wireframeLinejoin、vertexColors、fog。

独特属性：