如何在轴three.js上旋转3D对象？ [英] How to rotate a 3D object on axis 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）

旋转，但问题是立方体在自己的轴上旋转，所以旋转后，它不能按预期旋转。

我找到了如何围绕轴旋转Three.js Vector3？，但它只是让一个Vector3点围绕世界轴旋转？

我试图使用 matrixRotationWorld 作为

  @ mesh.matrixRotationWorld.x + = x * Math.PI / 180 
 @ mesh.matrixRotationWorld.y + = y * PI / 180 
 @ mesh.matrixRotationWorld.z + = z * Math.PI / 180 
  

但是它不工作，我不是我用错了方式还是有其他方法..

所以，如何让3D立方体围绕世界轴旋转

解决方案

这里是我使用的两个函数。它们基于矩阵旋转。并可绕任意轴旋转。要使用世界坐标轴旋转，可以使用第二个函数rotateAroundWorldAxis（）。

 轴在对象空间
 var rotObjectMatrix; 
 function rotateAroundObjectAxis（object，axis，radians）{
 rotObjectMatrix = new THREE.Matrix4（）; 
 rotObjectMatrix.makeRotationAxis（axis.normalize（），radians）; 
 
 // Three.JS的旧代码pre r54：
 // object.matrix.multiplySelf（rotObjectMatrix）; // post-multiply 
 // Three.JS的新代码r55 +：
 object.matrix.multiply（rotObjectMatrix）; 
 
 // Three.js的旧代码pre r49：
 // object.rotation.getRotationFromMatrix（object.matrix，object.scale）; 
 // Three.js的旧代码r50-r58：
 // object.rotation.setEulerFromRotationMatrix（object.matrix）; 
 // Three.js的新代码r59 +：
 object.rotation.setFromRotationMatrix（object.matrix）; 
} 
 
 var rotWorldMatrix; 
 //在世界空间中绕任意轴旋转一个对象
 function rotateAroundWorldAxis（object，axis，radians）{
 rotWorldMatrix = new THREE.Matrix4（）; 
 rotWorldMatrix.makeRotationAxis（axis.normalize（），radians）; 
 
 // Three.JS的旧代码pre r54：
 // rotWorldMatrix.multiply（object.matrix）; 
 // Three.JS的新代码r55 +：
 rotWorldMatrix.multiply（object.matrix）; // pre-multiply 
 
 object.matrix = rotWorldMatrix; 
 
 // Three.js的旧代码pre r49：
 // object.rotation.getRotationFromMatrix（object.matrix，object.scale）; 
 // Three.js的旧代码pre r59：
 // object.rotation.setEulerFromRotationMatrix（object.matrix）; 
 // r59 +的代码：
 object.rotation.setFromRotationMatrix（object.matrix）; 
} 
  

所以你应该在 / code>函数（requestAnimFrame回调），导致在x轴上旋转90度：

  var xAxis = new THREE.Vector3（1,0,0）; 
 rotateAroundWorldAxis（mesh，xAxis，Math.PI / 180）; 
  




I have a great problem about the rotation in three.js I want to rotate my 3D cube in one of my game.

//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 [[e-mail]]
    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

and (x, y, z) may be (1, 0, 0)

then the cube can rotate, but the problem is the cube rotate on its own axis,so after it has rotated, it can't rotate as expected.

I find the page How to rotate a Three.js Vector3 around an axis?, but it just let a Vector3 point rotate around the world axis?

and I have tried to use matrixRotationWorld as

@mesh.matrixRotationWorld.x += x * Math.PI / 180
@mesh.matrixRotationWorld.y += y * Math.PI / 180
@mesh.matrixRotationWorld.z += z * Math.PI / 180

but it doesn't work, I don't whether I used it in a wrong way or there are other ways..

so, how to let the 3D cube rotate around the world's axis???

解决方案

Here are the two functions I use. They are based on matrix rotations. and can rotate around arbitrary axes. To rotate using the world's axes you would want to use the second function 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);
}

So you should call these functions within your anim function (requestAnimFrame callback), resulting in a rotation of 90 degrees on the x-axis:

var xAxis = new THREE.Vector3(1,0,0);
rotateAroundWorldAxis(mesh, xAxis, Math.PI / 180);

这篇关于如何在轴three.js上旋转3D对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！