我对Three.js的旋转有很大的疑问,我想在自己的一款游戏中旋转3D立方体。
//init geometry = new THREE.CubeGeometry grid, grid, grid material = new THREE.MeshLambertMaterial {color:0xFFFFFF * Math.random(), shading:THREE.FlatShading, overdraw:true, transparent: true, opacity:0.8} for i in [1...@shape.length] othergeo = new THREE.Mesh new THREE.CubeGeometry(grid, grid, grid) othergeo.position.x = grid * @shape[i][0] othergeo.position.y = grid * @shape[i][1] THREE.GeometryUtils.merge geometry, othergeo @mesh = new THREE.Mesh geometry, material //rotate @mesh.rotation.y += y * Math.PI / 180 @mesh.rotation.x += x * Math.PI / 180 @mesh.rotation.z += z * Math.PI / 180
并且(x,y,z)可以是(1、0、0)
则多维数据集可以旋转,但是问题在于多维数据集绕其自身的轴旋转,因此,旋转后,它无法按预期旋转。
并且我尝试使用 matrixRotationWorld 作为
@mesh.matrixRotationWorld.x += x * Math.PI / 180 @mesh.matrixRotationWorld.y += y * Math.PI / 180 @mesh.matrixRotationWorld.z += z * Math.PI / 180
但它不起作用,我不以错误的方式使用它,还是有其他方法。
因此,如何让3D立方体绕世界轴旋转???
这是我使用的两个功能。它们基于矩阵旋转。并可以绕任意轴旋转。要使用世界上的轴旋转,您需要使用第二个函数rotateAroundWorldAxis()。
// Rotate an object around an arbitrary axis in object space var rotObjectMatrix; function rotateAroundObjectAxis(object, axis, radians) { rotObjectMatrix = new THREE.Matrix4(); rotObjectMatrix.makeRotationAxis(axis.normalize(), radians); // old code for Three.JS pre r54: // object.matrix.multiplySelf(rotObjectMatrix); // post-multiply // new code for Three.JS r55+: object.matrix.multiply(rotObjectMatrix); // old code for Three.js pre r49: // object.rotation.getRotationFromMatrix(object.matrix, object.scale); // old code for Three.js r50-r58: // object.rotation.setEulerFromRotationMatrix(object.matrix); // new code for Three.js r59+: object.rotation.setFromRotationMatrix(object.matrix); } var rotWorldMatrix; // Rotate an object around an arbitrary axis in world space function rotateAroundWorldAxis(object, axis, radians) { rotWorldMatrix = new THREE.Matrix4(); rotWorldMatrix.makeRotationAxis(axis.normalize(), radians); // old code for Three.JS pre r54: // rotWorldMatrix.multiply(object.matrix); // new code for Three.JS r55+: rotWorldMatrix.multiply(object.matrix); // pre-multiply object.matrix = rotWorldMatrix; // old code for Three.js pre r49: // object.rotation.getRotationFromMatrix(object.matrix, object.scale); // old code for Three.js pre r59: // object.rotation.setEulerFromRotationMatrix(object.matrix); // code for r59+: object.rotation.setFromRotationMatrix(object.matrix); }
因此,您应该在anim函数中调用这些函数(requestAnimFrame回调),从而在x轴上旋转90度:
anim
var xAxis = new THREE.Vector3(1,0,0); rotateAroundWorldAxis(mesh, xAxis, Math.PI / 180);