如何用THREE.js（無框/立方體幾何）使用javascript構建3D立方體？

Question

這是我的。立方體的幾何形狀。我搞亂了輸入的面孔。我的項目是JSFiddle上的Bizzare wall。另外什麼是執行旋轉的好方法？我在我的項目中使用的是因爲旋轉而破壞我的牆。感謝您的幫助提前。

function initGeom(){ 
/**TODO: optimize, to keep it simple in my mind I 
pictured divided the cube into six squares but 
I duplicated some of the vertices. 
*/ 

var cubeGeom = new THREE.Geometry(); 
var verts = [//front 
      new THREE.Vector3(0,0,0),//0 
      new THREE.Vector3(cubeSize,0,0),//1 
      new THREE.Vector3(cubeSize,cubeSize,0),//2 
      new THREE.Vector3(0,cubeSize,0),//3 
      //back 
      new THREE.Vector3(0,0,cubeSize),//4 
      new THREE.Vector3(cubeSize,0,cubeSize),//5 
      new THREE.Vector3(cubeSize,cubeSize,cubeSize),//6 
      new THREE.Vector3(0,cubeSize,cubeSize)//7 
      ];//15 


var faces = [//===Face1===(front)WORKS! 
      new THREE.Face3(0, 3, 2),//Top Left Tri 2,3,0 
      new THREE.Face3(2, 1, 0),//Bottom Right Tri 0,1,2 
      //===Face2===(right)// WORKS! 
      new THREE.Face3(5, 1, 2),//Top Left Tri 2,1,5 
      new THREE.Face3(2, 6, 5),//Bottom Right Tri 5,2,6 
      //===Face5(Left)===WORKS! 
      new THREE.Face3(0, 4, 7),//Top Right Tri 7,4,0 
      new THREE.Face3(7, 3, 0),//Top Right Tri 0,3,7 
      //===Face3===(top)//WORKS! 
      new THREE.Face3(2, 3, 7),//Top Left Tri 7, 3, 2 
      new THREE.Face3(7, 6, 2),//Bottom Right Tri 2,6,7 
      //===Face 6(bottom)===(optimized) go back to 
      new THREE.Face3(1, 0, 4),//Left tri 0,3,6 
      new THREE.Face3(6, 4, 0),//Right tri 6,4,0 
      //===Face4(back)===//some how is the front? 
      new THREE.Face3(4, 5, 6),//bottomLeft Tri 6,5,4 
      new THREE.Face3(6,7, 4), //Top Right Tri 4,7,6 
      ]; 


cubeGeom.vertices = verts; 
cubeGeom.faces = faces; 

//scene.add(cubeMesh); 
return cubeGeom; 

}

Answer 1

是否有一個理由，爲什麼你不希望使用現有的THREE.BoxGeometry？旋轉對象的最簡單方法是使用網格的rotateOnAxis方法。