摘要：學(xué)習(xí)學(xué)習(xí)筆記點(diǎn)擊查看演示地址簡(jiǎn)單網(wǎng)格材質(zhì)是一種不受渲染時(shí)使用的顏色影響的材質(zhì)，它只與自己每一個(gè)面從內(nèi)到外的法向量有關(guān)。法向量在中用處十分廣泛，光的反射，以及三維圖形的紋理映射都與這個(gè)有關(guān)。

MeshNormalMaterial是一種不受渲染時(shí)使用的顏色影響的材質(zhì)，它只與自己每一個(gè)面從內(nèi)到外的法向量有關(guān)。法向量在webgl中用處十分廣泛，光的反射，以及三維圖形的紋理映射都與這個(gè)有關(guān)。

從圖中可以看到，網(wǎng)格的每一面渲染的顏色都是不一樣的，如果我們想要在物體表面添加法向量，我們可以使用的THREE.ArrowHelper去表示每一個(gè)法向量，它的參數(shù)為

THREE.ArrowHelper（dir, origin, length, color, headLength, headWidth）

**其中參數(shù)的意義為：
dir:方向,默認(rèn)是法向量
origin:開(kāi)始的坐標(biāo)位置
length：輔助線的長(zhǎng)度
color：輔助線的顏色
headLength：頭部的長(zhǎng)度
headWidth：頭部的寬度**

對(duì)于一個(gè)球體，要描述它每一個(gè)面的法向量，首先需要對(duì)它的每一個(gè)面進(jìn)行遍歷，取出這個(gè)面上的三個(gè)頂點(diǎn)（因?yàn)閣ebgl的面都是三角形，所以是三個(gè)頂點(diǎn)），通過(guò)divideScalar(3)這個(gè)函數(shù)計(jì)算它的中心位置，我們就可以在這個(gè)中心位置點(diǎn)上，從內(nèi)向外引出一個(gè)ArrowHelper，來(lái)模擬法向量。

 for(let i=0;i
其中，centroid.add(sphereGeometry.vertices[face.a])這段代碼中的sphereGeometry.vertices存有幾何體的所有頂點(diǎn)信息，通過(guò)[ ]索引可以取得其中的某一個(gè)頂點(diǎn)。face.a還有下面的face.b和c都是該面的頂點(diǎn)索引號(hào)，表示這個(gè)面是由頂點(diǎn)編號(hào)為face.a，face.b，face.c的三個(gè)頂點(diǎn)所構(gòu)成的一個(gè)三角形（webgl的面都是三角形），然后我們?cè)儆?jì)算這三個(gè)頂點(diǎn)的中心點(diǎn)。
菜單面板的設(shè)置
在菜單面板中設(shè)置一些MeshNormalmaterial的一些屬性，便于去測(cè)試這種材質(zhì)的一些特質(zhì)
其中：
**this.visible = meshMaterial.visible;//是否可見(jiàn)
        this.wireframe = meshMaterial.wireframe;//是否以線框的方式渲染物體
        this.wireframeWidth = meshMaterial.wireframeLinewidth;//線框的寬度
        this.transparent = meshMaterial.transparent;//是否透明
        this.opacity = meshMaterial.opacity;//透明度，需要transparent為true才有效果
        this.side = "front";//邊的渲染方式，有三種，前面，后面，還有雙面
        this.selectMesh = "sphere";//當(dāng)前選擇的幾何體
        this.shading = "smooth";//著色方式，有平面著色和平滑著色，對(duì)一個(gè)面很平的幾何體幾乎看不出區(qū)別，如正方體**
    
function initDatGUI() {
        //設(shè)置菜單中需要的參數(shù)
        controls = new function () {
            this.rotationSpeed = 0.02;
            this.visible = meshMaterial.visible;//是否可見(jiàn)
            this.wireframe = meshMaterial.wireframe;//是否以線框的方式渲染物體
            this.wireframeWidth = meshMaterial.wireframeLinewidth;//線框的寬度
            this.transparent = meshMaterial.transparent;//是否透明
            this.opacity = meshMaterial.opacity;//透明度，需要transparent為true才有效果
            this.side = "front";//邊的渲染方式，有三種，前面，后面，還有雙面
            this.selectMesh = "sphere";//當(dāng)前選擇的幾何體
            this.shading = "smooth";//著色方式，有平面著色和平滑著色，對(duì)一個(gè)面很平的幾何體幾乎看不出區(qū)別，如正方體
        };
        let gui = new dat.GUI();
        //將剛剛設(shè)置的參數(shù)添加到菜單中
        let F1 = gui.addFolder("Mesh");
        F1.add(controls, "rotationSpeed", 0, 0.1);
        F1.add(controls, "visible").onChange(function (e) {
            meshMaterial.visible = e;
        });
        F1.add(controls, "wireframe").onChange(function (e) {
            meshMaterial.wireframe = e;
        });
        F1.add(controls, "wireframeWidth",0,10).onChange(function (e) {
            meshMaterial.wireframeWidth = e;
        });
        F1.add(controls, "transparent").onChange(function (e) {
            meshMaterial.transparent = e;
        });
        F1.add(controls, "opacity",0,1).onChange(function (e) {
            meshMaterial.opacity = e;
        });
        F1.add(controls, "side",["front","back","double"]).onChange(function (e) {
            switch (e) {
                case "front":
                    meshMaterial.side = THREE.FrontSide;
                    break;
                case "back":
                    meshMaterial.side = THREE.BackSide;
                    break;
                case "double":
                    meshMaterial.side = THREE.DoubleSide;
                    break;
            }
            meshMaterial.needsUpdate = true;//要在程序中讓材質(zhì)更新需要添加這一句話
        });
        F1.add(controls, "selectMesh",["sphere","cube","plane"]).onChange(function (e) {
            //先把場(chǎng)景的物體清除，再來(lái)添加
            scene.remove(cube);
            scene.remove(sphere);
            scene.remove(plane);
            switch (e) {
                case "sphere":
                    scene.add(sphere);
                    break;
                case "cube":
                    scene.add(cube);
                    break;
                case "plane":
                    scene.add(plane);
                    break;
            }
        });
        F1.add(controls, "shading",["flat","smooth"]).onChange(function (e) {
            switch (e) {
                case "flat":
                    meshMaterial.shading = THREE.FlatShading;
                    break;
                case "smooth":
                    meshMaterial.shading = THREE.SmoothShading;
                    break;
            }
            meshMaterial.needsUpdate = true;//要在程序中讓材質(zhì)更新需要添加這一句話
        });
    }
**注意在程序運(yùn)行過(guò)程中想要改變材質(zhì)的屬性，需要在改完以后，添加一句
meshMaterial.needsUpdate = true，這樣才能更新成功。**
360度全景背景
360度全景背景能夠讓人有身臨其境的感覺(jué)，所有這里的背景使用了全景背景

如果想要使用全景的背景，就需要6張6個(gè)方向的圖片來(lái)合成一個(gè)完整的背景（也可以使用1張6方向的圖片），然后把這些貼圖賦值給 scene.background
 let urls =[
            "image/posx.jpg",
            "image/negx.jpg",
            "image/posy.jpg",
            "image/negy.jpg",
            "image/posz.jpg",
            "image/negz.jpg"
        ];//引入6個(gè)方向的貼圖
        let cubeMap = THREE.ImageUtils.loadTextureCube( urls );
        scene = new  THREE.Scene();
        scene.background = cubeMap;
這些圖片的需要按照順序擺放，右左上下后前，否則背景會(huì)錯(cuò)亂。
這里給一個(gè)全景圖片的網(wǎng)站，里面有很多的360度風(fēng)景圖，都是6張類型的，下載下來(lái)解壓后就可以直接引入
http://www.humus.name/index.p...
本例子的完整代碼如下：