如何使用带有THRE.js的javascript构建3D立方体(没有长方体/立方体几何体)
How to construct a 3D cube using javascript with THREE.js (without box/cube geometry)?
这是我所拥有的。多维数据集的几何体。我把进入人脸搞砸了。我的项目是JSFiddle上的Bizzare墙。还有,进行旋转的好方法是什么?我在我的项目中使用的是因为旋转而打破我的墙。
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;
}
是否有原因不想使用现有的THREE.BoxGeometry
?旋转对象的最简单方法是使用网格的rotateOnAxis
方法。
相关文章:
- html画布中的等轴测立方体投影
- 使用镶边立方体浏览器
- 控制立方体或其他几何体的每个面,分为三.js
- 使用ng重复或ng选项和删除空白选项选择长方体角度
- 为什么当我用jQuery制作长方体动画时,CSS3长方体阴影会分离
- 方向感知三维立方体动画
- Three.js立方体-旋转到任意一侧
- html5立方体幻灯片
- 如何点击并滑入三个js立方体
- 三个js立方体是黑色的..不是红色
- 三js立方体相机没有像我预期的那样反射
- Chrome动画CSS3三维立方体与悬停状态问题
- 如何在three.js中检测立方体和球体之间的碰撞
- 立方体纹理加载器不加载天空盒在三个.js
- 线框立方体几何图形
- 三.js - 使用CubeTextureLoader在立方体的每个面上创建不同的图像
- 3D 立方体创建和处理该多维数据集上的事件
- 三.js立方体摄像机环境图不起作用
- 按三个.js序列对立方体进行动画处理
- 如何使用带有THRE.js的javascript构建3D立方体(没有长方体/立方体几何体)