Three.js记事[二]

在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);