如何用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方法。