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