使用Three.js的材質

1.three.js提供哪些材質？

    MeshBasicMaterial(網格基礎材質)/基礎材質，，可以用它富裕幾何體一種簡單的亞瑟，或者顯示幾何體的線框

    MeshDepthMaterial（網格深度材質）/根據網格到相機的舉例，這種材質決定如何給網格染色

    MeshNormalMaterial(網格法向材質)/這是一種簡單的材質，根據物體表面的方向向量計算顏色

    MeshFaceMaterial(網格面材質)/這是一個容器，可以在這個容器里為物體的各個表面指定不同的顏色

    MeshLambertMaterial(網格朗伯材質)/這種材質會考慮光照的影響，可以用來創建顏色暗淡的、不光亮的物體

    MeshPhongMaterial(網格Phong式材質)/這種材質會考慮光照的影響，而且可以用來創建光亮的物體

    ShaderMaterial(著色器材質)/這種材質允許使用自定義的著色器程序，直接控制頂點的仿制方式，以及像素的著色方式

    LineBasicMaterial(直線基礎材質)/這種材質可以用于THREE.Line幾何體,從而創建著色的直線

    LineDashedMaterial(虛線材質)/這種材質跟直線基礎材質一樣，不過可以用來創建出一種虛線效果

2.MeshBasicMaterial常用屬性

    color/設置材質的顏色

    wireframe/設置這個屬性可以將材質渲染成線框。對調試非常有利

    wireframeLinewidth/如果已經打開了wireframe，這個屬性可以定義線框中線的寬度

    wireframeLinecap（線框線端點）/這個屬性定義線框模式下頂點間線段的端點如何顯示。可包括butt(平)、round(圓)、squre（方）。默認值是round。WebGlRenderer不支持該屬性

    shading(著色)/該屬性定義如何著色。可選的值是THREE.SmoothShading和THREE.FlatShading。

    vertexColors(頂點顏色)/可以通過這個屬性為每個頂點定義不同的顏色。該屬性在使用CanvasRenderer時不起作用，但可以在使用WebGLRenderer時起作用。

    fog(霧化)/該屬性指定當前材質是否會受到全局霧化效果設置的影響。

    初始化方式：

var meshMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff});

mashMaterial.visible = false;

3.基于深度著色的MeshDepthMaterial

   使用這種材質的物體，其外觀不是有光照或某個材質屬性決定的；而是由物體到相機的距離決定的。可以將這種材質與其他材質想結合，從而很容易地創建出逐漸消失的效果。   

4.融合材質

    我們知道MeshDepthMaterial不能設置顏色，一切都是有材質的默認屬性決定的。但是，three.js可通過聯合材質創建出新效果。使用方式如下：

... var cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);                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);
...

   展示效果如下：

    這些方塊可以從MeshDepthMaterial對象獲得漸變效果，從MeshBasicMaterial獲取顏色。為了使顏色能夠有漸變效果，必須設置MeshBasicMaterial的transparent為true，設置融合blending的方式。在查看最后一行代碼，如何不這樣設置，在渲染的時候就會出現閃爍。

5.計算法向顏色的MeshNormalMaterial

    MeshNormalMaterial會根據每個面的法向量來決定顏色，如果是一個球面，由于每個面的法向量不一樣，所有每個面的顏色也不一樣。該材質最主要的一個屬性是shading，設置著色的方式：THREE.FlatShading表示平面著色、THREE.SmoothShading表示平滑作色。兩個著色差別如下圖所示：

5.為每個面指定材質的MeshFaceMaterial

    通過MeshFaceMaterial可以為幾何體的每一個面指定不同的材質。加入你有一個方塊，上面有六個面，你可以用這種材質來為每個面指定一個材質。例如：

var group = new THREE.Mesh();        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 faceMeterial = new THREE.MeshFaceMaterial(mats);        var cubeGeom = new THREE.CubeGeometry(3, 3, 3);        var cube = new THREE.Mesh(cubeGeom, faceMeterial);
        scene.add(cube);

6.暗淡、不光亮表面材質MeshLambertMaterial

    兩個比較重要的屬性ambient和emissive。ambient（環境色）跟AmbientLight光源一起使用。這個顏色會與AmbientLight光源的顏色相乘。默認值為白色；emissvie(發射的)是該材質發射的顏色。它其實并不像一個光源，只是一種純粹的、不收其他光照影響的顏色。默認值為黑色。實例化方式：

var meshMateial = new THREE.MeshLambertMaterial({color: 0x7777ff});

7.用于光亮表面的MeshPhongMaterial

   除了基礎屬性以及和MeshLambertMaterial一樣的ambient和emissive屬性。還包括:
specular(鏡面的)/該屬性指定該材質的光亮程度及其高亮部分的顏色。如果設置成和color一樣的顏色，將會得到一種更加類似金屬的材質。如果設置為grey，材質變的更加塑料。
   shininess/指定高亮部分的亮度，默認為30

8.使用ShaderMaterial創建自己的著色器

    ShaderMaterial是Three.js庫中功能最豐富、最復雜的一種材質。通過它，可以使用自己定制的著色器，直接在WebGL環境中運行。ShaderMaterial包含的幾個常用屬性wireframe、wireframeLinewidth、shading、vertexColors、fog其他材質已經介紹過。ShaderMaterial還包含幾個特別屬性：
    fragementShader(片元著色器)/這個著色器定義的是每個傳入的像素顏色
    vertexShader(頂點著色器)/這個著色器允許你修改每一個傳入的頂點的位置
    uniforms/通過這個屬性可以向你的著色器發信息。同樣的信息會發送到每一個頂點和片元
    defines/這個屬性可以轉換為vertexShader和fragmentShader里的#define代碼。該屬性可以用來設置著色器程序里的一些全局變量
    attributes/改屬性可以修改每個頂點和片元。通常用來傳遞位置數據和法向量相關的數據。如果要用這個屬性，anemia你要為幾何體中的所有頂點提供信息
    lights/定義光照數據是否傳遞給著色器。默認為false

    在創建ShaderMaterial，必須要傳遞兩個重要的屬性vertexShader和fragmentShader。兩個都是對應的一段WebGL頂點和片元著色器源碼字符串。例如我們在js中先定義一段vertexShader代碼：

<script id="vertex-shader" type="x-shader/x-vertex">
    uniform float time;
    varying vec2 vUv;    void main()
    {
    vec3 posChanged = position;
    posChanged.x = posChanged.x*(abs(sin(time*1.0)));
    posChanged.y = posChanged.y*(abs(cos(time*1.0)));
    posChanged.z = posChanged.z*(abs(sin(time*1.0)));    //gl_Position = projectionMatrix * modelViewMatrix * vec4(position*(abs(sin(time)/2.0)+0.5),1.0);
    gl_Position = projectionMatrix * modelViewMatrix * vec4(posChanged,1.0);
    }</script>

    由于幾個幾何體有多個面，所有一般都會寫多個fragmentShader，每一個面包含對應一個fragmentShader。fragmentShader我們可以從網站(https://www.shadertoy.com)上拷貝各種各樣的片元著色器。下面是創建一個ShaderMaterial的例子：

function createMaterial(vertexShader, fragmentShader){            var verShader = document.getElementById(vertexShader).innerHTML;            var fragShader = document.getElementById(fragmentShader).innerHTML;            var attributes = {};            var uniforms = {
                time: {type: 'f', value: 0.2},
                scale: {type: 'f', value: 0.2},
                alpha: {type: 'f', value: 0.6},
                resolution: {type: 'v2', value: new THREE.Vector2()}
            }

            uniforms.resolution.value.x = window.innerWidth;
            uniforms.resolution.value.y = window.innerHeight;            var meshMaterial = new THREE.ShaderMaterial({
                uniforms: uniforms,
                attributes: attributes,
                vertexShader: verShader,
                fragmentShader: fragShader,
                transparent: true
            });            return meshMaterial;
        }

    我們設置了attributes、uniforms參數。在初始化ShaderMaterial的時候傳遞進去。最后創建一個幾何體。例如：

var cubeGeometry = new THREE.BoxGeometry(20, 20, 20);        var meshMaterial1 = createMaterial("vertex-shader", "fragment-shader-1");        var meshMaterial2 = createMaterial("vertex-shader", "fragment-shader-2");
        ...        var material = new THREE.MeshFaceMaterial([meshMaterial1, meshMaterial2, meshMaterial3, meshMaterial4, meshMaterial5, meshMaterial6]);        var cube = new THREE.Mesh(cubeGeometry, material);

        scene.add(cube);

9.線段幾何體材質LineBasicMaterial

    LineBasiceMaterial包含的屬性如下所示：

    color/指定線的顏色。如果指定了vertexColors，這個屬性就會被忽略。

    linewidth/該屬性定義線的寬度

    LineCap/該屬性定義頂點建的線段端點如何顯示。可選值包括butt(平)、round（圓）、square（方），默認值是round。WebGLRenderer不支持該屬性。

    LineJoin/該屬性定義的是線段連接點如何顯示。WebGLRenderer不支持該屬性

    vertexColors/將這個屬性設置成THREE.VecterColors值，就可以為每個頂點指定一個顏色

    fog/指定當期物體是否受全局霧化效果影響

    下面的代碼是使用LineBasicMaterial根據Gosper曲線創建的連線顯示代碼：

var points = gosper(4, 60);            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);
                colors[i].setHSL(e.x/100 + 0.5, (e.y * 20)/300, 0.8); // 設置HSL顏色，提供色調（hue）、飽和度（saturation）、亮度（lightness）
                i++;
            });
            lines.colors = colors;            var material = new THREE.LineBasicMaterial({
                opacity: 1.0,
                linewidth: 1,
                vertexColors: THREE.VertexColors
            });            var line = new THREE.Line(lines, material);
            line.position.set(25, -30, -60);

    代碼創建一個THREE.Geometry實例，為每個坐標創建一個頂點，把它放進該實例的線段屬性中。對于每個坐標我們還會計算一個顏色值，用來設置colors屬性。

    線段還有另外一個LineDashedMaterial材質，和LineBasicMaterial材質功能相似。區別在于顯示線段時包含了短劃線和空格。包含屬性有scale、dashSize（斷線長度）、gapSize（間隔長度）。另外還需注意的是必須要調用THREE.Geometry的computeLineDistance()方法，如果不調用，間隔就不會顯示出來。