Three.js 3D Cube rotation on axis

Question

I currently have a cube that I'm trying to rotate on a corner. I need it to spin on the corner like the photo below.

http://www.flickr.com/photos/fiu/2198328580/

I'm new to Three.js, so I'm sorry if this is a dumb question.

Here's the code for what I currently have

var geometry= new THREE.CubeGeometry (200,200,200, 4, 4, 4);
             // material

            var material = new THREE.MeshLambertMaterial({
            map: THREE.ImageUtils.loadTexture('inc/cube.jpg'), overdraw: true
             }); 



            cube = new THREE.Mesh( geometry, material );
            cube.overdraw = true;
            cube.position.y = 80;
            cube.position.x = 5;
            cube.position.z = 6;
            cube.rotation.z = 14.9;
            cube.rotation.y = 0 ;
            cube.rotation.x = 0 ;


            scene.add(cube);

On another note.... since I have the cube.jpg texture on the cube, if I have the values for the THREE.CubeGeometry set to (200,200,200) without the 4's, the texture warps... Anyone know how to stop the warping?

This is what I'm using to render:

renderer = new THREE.CanvasRenderer(); renderer.setClearColorHex(0xffffff, 0); renderer.setSize( window.innerWidth, window.innerHeight ); container.appendChild( renderer.domElement );

It seems to work across most browsers, but if I use the WebGL renderer, it gives me issues with the Opacity of the Canvas.

To see the Project as it stands right now, its at http://fiudevspace.com/spincube

Answer 1

从概念上讲，您需要做的是将多维数据集与已旋转的45度在不同的轴上旋转45度-我不使用“三”，因为它会在我和我的解决方案之间带来更多的帮助-记住物体上的经验法则旋转：首先将对象的中心平移回原点（如果尚不存在），然后围绕所需的每个轴旋转，最后将对象平移回原位（与先前平移相反）-希望这会有所帮助

Answer 2

This link would help you to rotate a cube around its edge. https://github.com/mrdoob/three.js/issues/1254