在Three.js的世界里，以點畫面的三維剖析是比較基礎(chǔ)的概念

我一直不知道如何去正確的，更好的理解這個空間概念，只能以盡量簡單白話式的去總結(jié)，來讓自己清晰的明白此處概念，此篇記錄這種方式，提醒自己

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，建立材質(zhì)

var materials= [

newTHREE.MeshLambertMaterial({opacity:0.6,color:0x44ff44,transparent:true}),

newTHREE.MeshBasicMaterial({color:0x000000,wireframe:true})

];

5，建立網(wǎng)格

var mesh=THREE.SceneUtils.createMultiMaterialObject(geo,materials);

mesh.children.forEach(function(e){e.castShadow=true});

6，添加至場景

scene.add(mesh);