学习Three.js——材质(Material)

材质

材质的种类

MeshBasicMaterial:基础材质，给几何体赋予一种简单的颜色，不受光源的影响

MeshDepthMaterial:深度材质，这种材质根据摄像机到网格的距离给网格上色，常用于得到物体逐渐原理视线消失的效果

MeshNormalMaterial:法向材质，这种材质根据每个面的法向量而附上不同的颜色

MeshFaceMaterial:面材质，可以为几何体的不同面赋予不同的材质

MeshLambertMaterial:Lambert材质，一种表面粗糙，比较暗淡的材质

MeshPhongMaterial:一种比较光亮的材质

ShaderMaterial:着色器材质，允许使用自定义的着色器

LineBasicMaterial:直线基础材质，用于创建着色的直线

LineDashMaterial:和直线基础材质一样，不过可以创建一种虚线的效果

材质的共有属性

id:标识符，用于识别材质，第一个材质为0，第二个为1，以此类推

name:名称，也是用于识别材质

opacity:不透明度，1表示不透明，0表示完全透明，和transparent配合使用

transparent:是否使用透明，当设置为true时opacity才有效

visible:是否可见，设置为false则看不见物体

side:用于设置几何体那一面应用材质，THREE.FrontSide表示外侧，THREE.BackSize表示内侧，THREE.DoubleSide表示两侧，但是比较耗资源

needsUpdate:是否需要更新，若设置为true，下一次渲染则使用新的材质，并重新设置为false

MeshBasicMaterial

基础材质的颜色只与初始化定义的颜色有关，不受光照的影响。

基础材质有自己的特有属性。

color:颜色

wireframe:是否显示线框

wireframeLinewidth:线框线的宽度

shading:定义着色的方式，可选的值有

-THREE.SmoothShading:平滑过渡，看不到面和面之间的连接

-THREE.NoShading:不使用着色

-THREE.FlatShading:

vertexColors:顶点颜色，可选的值有

-THREE.NoColors:没有颜色

-THREE.VertexColors:使用geometry几何体的颜色

fog:是否受全局雾化的影响

MeshDepthMeterial

这种材质的外观不受光照的影响，而是由物体到摄像机的距离决定，通过这种材质和其他材质组合，可以创造出逐渐消失的效果。

它只有两种属性

wireframe:是否显示线框

wireframeLineWidth:控制线框的宽度

效果

MeshNormalMaterial

这种材质根据每个面的法向量不同而对该面使用不同的材质

它有三种属性：

wireframe:是否显示线框

wireframeLineWidth:控制线框的宽度

shading:选择不同的着色方式，可以选择THREE.FlatingShading(平面着色)和THREE.SmoothShading(平滑着色)

THREE.FlatingShading:

THREE.SmoothFlating

THREE.MeshFaceMaterial

这不是一种材质，而是为每个面分配不同的材质

用法

var group = new THREE.Mesh();
        // add all the rubik cube elements
        var mats = [];
        mats.push(new THREE.MeshBasicMaterial({color: 0x009e60}));
        mats.push(new THREE.MeshBasicMaterial({color: 0x009e60}));
        mats.push(new THREE.MeshBasicMaterial({color: 0x0051ba}));
        mats.push(new THREE.MeshBasicMaterial({color: 0x0051ba}));
        mats.push(new THREE.MeshBasicMaterial({color: 0xffd500}));
        mats.push(new THREE.MeshBasicMaterial({color: 0xffd500}));
        mats.push(new THREE.MeshBasicMaterial({color: 0xff5800}));
        mats.push(new THREE.MeshBasicMaterial({color: 0xff5800}));
        mats.push(new THREE.MeshBasicMaterial({color: 0xC41E3A}));
        mats.push(new THREE.MeshBasicMaterial({color: 0xC41E3A}));
        mats.push(new THREE.MeshBasicMaterial({color: 0xffffff}));
        mats.push(new THREE.MeshBasicMaterial({color: 0xffffff}));

        var faceMaterial = new THREE.MeshFaceMaterial(mats);

        for (var x = 0; x < 3; x++) {
            for (var y = 0; y < 3; y++) {
                for (var z = 0; z < 3; z++) {
                    var cubeGeom = new THREE.BoxGeometry(2.9, 2.9, 2.9);
                    var cube = new THREE.Mesh(cubeGeom, faceMaterial);
                    cube.position.set(x * 3 - 3, y * 3, z * 3 - 3);

                    group.add(cube);
                }
            }
        }
        
        scene.add(group);

注意这里使用了群(group)，将小立方体加入群组成一个大立方体。

另外系统会为每个面分配对应的材质(materialIndex),也可以自己手动为每个面定义材质。

效果图：

MeshLambertMaterial

一种表面比较暗淡的材质

ambient:环境的环境色，好像没什么用

emissive:材质发射的颜色，用于创造一种不受光源影响的颜色

wrapAround:此属性能够使得阴影变得柔和和分布均匀

wrapRGB:用于控制光下降的速度

效果：

MeshPhongMaterial

一种比较光亮的材质，属性有

ambient:环境光，好像没什么用

emissive:材质发出来的光，不受外部光照的影响

specular:用于设置材质光亮程度和高光部分的颜色

shininess:设置材质高光部分的亮度

metal:使得物体看起来更像金属

wrapAround、wrapRGB:和上面的一样

效果：

MeshShaderMaterial

略

LineBasicMaterial

用于渲染线段的材质，一些基本属性：

color:线段的颜色，如果定义了vertexColors，那么该属性将被忽略

vertexColor:线段端点的颜色，将其设置为THREE.VertexColors则可以根据colors数组为每个端点分配颜色，同时决定了线段的颜色

lineWidth:线段的宽度

fog:是否受全局雾化的影响

用法：

        var points = gosper(4, 60);//得到一条gosper曲线的各个顶点，暂时没搞懂这个函数
        var lines = new THREE.Geometry();
        var colors = [];
        var i = 0;
        points.forEach(function (e) {
            lines.vertices.push(new THREE.Vector3(e.x, e.z, e.y));
            colors[i] = new THREE.Color(0xffffff);//为每个端点都分配一个颜色，这里使用HSL色彩空间
            colors[i].setHSL(e.x / 100 + 0.5, (  e.y * 20 ) / 300, 0.8);
            i++;
        });

        lines.colors = colors;
        var material = new THREE.LineBasicMaterial({
            opacity: 1.0,
            linewidth: 1,
            vertexColors: THREE.VertexColors
        });

        var line = new THREE.Line(lines, material);

效果

LineDashMaterial

和前者差不多，但是可以绘制曲线，除了有以上的属性外，还有

scale:缩放dashSize和gapSize

dashSize:实线部分的长度

gapSize:虚线部分的长度

效果：