摘要：學習學習筆記點擊查看演示地址簡單網格材質是一種不受渲染時使用的顏色影響的材質，它只與自己每一個面從內到外的法向量有關。法向量在中用處十分廣泛，光的反射，以及三維圖形的紋理映射都與這個有關。
WebGL學習----Three.js學習筆記（5）
點擊查看demo演示
Demo地址：https://nsytsqdtn.github.io/d...
簡單網格材質 MeshNormalMaterial
MeshNormalMaterial是一種不受渲染時使用的顏色影響的材質，它只與自己每一個面從內到外的法向量有關。法向量在webgl中用處十分廣泛，光的反射，以及三維圖形的紋理映射都與這個有關。
從圖中可以看到，網格的每一面渲染的顏色都是不一樣的，如果我們想要在物體表面添加法向量，我們可以使用的THREE.ArrowHelper去表示每一個法向量，它的參數為
THREE.ArrowHelper（dir, origin, length, color, headLength, headWidth）
**其中參數的意義為：
dir:方向,默認是法向量
origin:開始的坐標位置
length：輔助線的長度
color：輔助線的顏色
headLength：頭部的長度
headWidth：頭部的寬度**
對于一個球體，要描述它每一個面的法向量，首先需要對它的每一個面進行遍歷，取出這個面上的三個頂點（因為webgl的面都是三角形，所以是三個頂點），通過divideScalar(3)這個函數計算它的中心位置，我們就可以在這個中心位置點上，從內向外引出一個ArrowHelper，來模擬法向量。
for(let i=0;i
其中，centroid.add(sphereGeometry.vertices[face.a])這段代碼中的sphereGeometry.vertices存有幾何體的所有頂點信息，通過[ ]索引可以取得其中的某一個頂點。face.a還有下面的face.b和c都是該面的頂點索引號，表示這個面是由頂點編號為face.a，face.b，face.c的三個頂點所構成的一個三角形（webgl的面都是三角形），然后我們再計算這三個頂點的中心點。
菜單面板的設置
在菜單面板中設置一些MeshNormalmaterial的一些屬性，便于去測試這種材質的一些特質
其中：
**this.visible = meshMaterial.visible;//是否可見
this.wireframe = meshMaterial.wireframe;//是否以線框的方式渲染物體
this.wireframeWidth = meshMaterial.wireframeLinewidth;//線框的寬度
this.transparent = meshMaterial.transparent;//是否透明
this.opacity = meshMaterial.opacity;//透明度，需要transparent為true才有效果
this.side = "front";//邊的渲染方式，有三種，前面，后面，還有雙面
this.selectMesh = "sphere";//當前選擇的幾何體
this.shading = "smooth";//著色方式，有平面著色和平滑著色，對一個面很平的幾何體幾乎看不出區(qū)別，如正方體**
function initDatGUI() {
//設置菜單中需要的參數
controls = new function () {
this.rotationSpeed = 0.02;
this.visible = meshMaterial.visible;//是否可見
this.wireframe = meshMaterial.wireframe;//是否以線框的方式渲染物體
this.wireframeWidth = meshMaterial.wireframeLinewidth;//線框的寬度
this.transparent = meshMaterial.transparent;//是否透明
this.opacity = meshMaterial.opacity;//透明度，需要transparent為true才有效果
this.side = "front";//邊的渲染方式，有三種，前面，后面，還有雙面
this.selectMesh = "sphere";//當前選擇的幾何體
this.shading = "smooth";//著色方式，有平面著色和平滑著色，對一個面很平的幾何體幾乎看不出區(qū)別，如正方體
};
let gui = new dat.GUI();
//將剛剛設置的參數添加到菜單中
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;//要在程序中讓材質更新需要添加這一句話
});
F1.add(controls, "selectMesh",["sphere","cube","plane"]).onChange(function (e) {
//先把場景的物體清除，再來添加
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;//要在程序中讓材質更新需要添加這一句話
});
}
**注意在程序運行過程中想要改變材質的屬性，需要在改完以后，添加一句
meshMaterial.needsUpdate = true，這樣才能更新成功。**
360度全景背景
360度全景背景能夠讓人有身臨其境的感覺，所有這里的背景使用了全景背景
如果想要使用全景的背景，就需要6張6個方向的圖片來合成一個完整的背景（也可以使用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個方向的貼圖
let cubeMap = THREE.ImageUtils.loadTextureCube( urls );
scene = new THREE.Scene();
scene.background = cubeMap;
這些圖片的需要按照順序擺放，右左上下后前，否則背景會錯亂。
這里給一個全景圖片的網站，里面有很多的360度風景圖，都是6張類型的，下載下來解壓后就可以直接引入
http://www.humus.name/index.p...
本例子的完整代碼如下：
Depth Material Test
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103850.html
