在Three.js的世界里，以點畫面的三維剖析是比較基礎的概念
我一直不知道如何去正確的，更好的理解這個空間概念，只能以盡量簡單白話式的去總結，來讓自己清晰的明白此處概念，此篇記錄這種方式，提醒自己
1，建立幾何體的vertice(頂點)，這里以方塊為樣本來解釋
在代碼中寫到:
//粗俗理解,x為左右方向;y為上下方向;z為遠近方向;
? ? var vertices = [
? ? ? ? ? ? ? ? ? ? ? ? newTHREE.Vector3(1,3,1),//+x+y+z? 上前右
? ? ? ? ? ? ? ? ? ? ? ? newTHREE.Vector3(1,3,-1),//+x+y-z 上后右
? ? ? ? ? ? ? ? ? ? ? ? newTHREE.Vector3(1,-1,1),//+x-y+z 下前右
? ? ? ? ? ? ? ? ? ? ? ? newTHREE.Vector3(1,-1,-1),//+x-y-z 下后右
? ? ? ? ? ? ? ? ? ? ? ? newTHREE.Vector3(-1,3,-1),//-x+y-z 上后左
? ? ? ? ? ? ? ? ? ? ? ? newTHREE.Vector3(-1,3,1),//-x+y+z? 上前左
? ? ? ? ? ? ? ? ? ? ? ? newTHREE.Vector3(-1,-1,-1),//-x-y-z 下后左
? ? ? ? ? ? ? ? ? ? ? ? newTHREE.Vector3(-1,-1,1)//-x-y+z? 下前左
? ? ];
? ? 一幅自己繪制的理解圖：(紅色代表XYZ，黑色代表三角面角點索引)
2，建立face(面)
? ? ? ? ? ? var faces = [
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//三角面角點a,b,c的索引
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?newTHREE.Face3(0,2,1),
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?newTHREE.Face3(2,3,1),//方塊top面
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?newTHREE.Face3(4,6,5),
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?newTHREE.Face3(6,7,5),//方塊bottom面
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?newTHREE.Face3(4,5,1),
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?newTHREE.Face3(1,3,4),//方塊right面
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?newTHREE.Face3(7,6,2),
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?newTHREE.Face3(2,0,7),//方塊left面
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?newTHREE.Face3(5,7,0),
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?newTHREE.Face3(0,1,5),//方塊front面
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?newTHREE.Face3(2,6,4),
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?newTHREE.Face3(4,3,2),//方塊back面
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?];
3，建立幾何體
vargeo=newTHREE.Geometry();
geo.vertices=vertices;
geo.faces=faces;
geo.computeFaceNormals();
geo.mergeVertices();
4，建立材質
var materials= [
newTHREE.MeshLambertMaterial({opacity:0.6,color:0x44ff44,transparent:true}),
newTHREE.MeshBasicMaterial({color:0x000000,wireframe:true})
];
5，建立網格
var mesh=THREE.SceneUtils.createMultiMaterialObject(geo,materials);
mesh.children.forEach(function(e){e.castShadow=true});
6，添加至場景
scene.add(mesh);
