Question

我目前有一个立方体，我试图在角落旋转。我需要它像下面的照片一样在角落旋转。

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

我是Three.js的新手，所以如果这是一个愚蠢的问题，我很抱歉。

这是我目前拥有的代码

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);

另一个注意事项....因为我在立方体上有cube.jpg纹理，如果我将THREE.CubeGeometry的值设置为（200,200,200）而没有4＆＃39; s，则纹理变形。谁知道如何停止翘曲？

这就是我用来渲染的内容：

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

它似乎适用于大多数浏览器，但如果我使用WebGL渲染器，它会给我带来画布不透明度的问题。

要立即查看项目，请点击http://fiudevspace.com/spincube

Answer 1

从概念上讲，您所需要的就是将立方体旋转45度，使其与您已经旋转的45度不同的轴 - 我不会使用THREE，因为它会在我和我的解决方案之间产生比它更有帮助 - 记住规则拇指对象旋转：首先将对象的中心转换回原点（如果还没有）然后围绕你需要的每个轴旋转，然后最终将对象转换回位置（与之前的翻译相反） - 希望这有助于

Answer 2

此链接可帮助您围绕其边缘旋转立方体。 https://github.com/mrdoob/three.js/issues/1254

在轴上的Three.js 3D立方体旋转

2 个答案: