javascript 如何在ThreeJS中将网格旋转90度?

shyt4zoc  于 2023-02-07  发布在  Java
关注(0)|答案(8)|浏览(243)

我有一个网格,我想旋转90度内三个JS。这里是目前的情况下的图像:

我希望所选网格平行于大网格旋转。我尝试过像这样旋转矩阵:

matrix =   new THREE.Matrix4().makeRotationX(1.57)

但是网格会发生奇怪的旋转。有没有更简单的方法可以将其旋转90度?

q3aa0525

q3aa05251#

threejs旋转使用弧度(您可能知道)
你可以用这个

mesh.rotation.x = Math.PI / 2;

mesh.rotation.set(new THREE.Vector3( 0, 0, Math.PI / 2));
i1icjdpr

i1icjdpr2#

可以使用此函数旋转对象:

function rotateObject(object, degreeX=0, degreeY=0, degreeZ=0) {
   object.rotateX(THREE.Math.degToRad(degreeX));
   object.rotateY(THREE.Math.degToRad(degreeY));
   object.rotateZ(THREE.Math.degToRad(degreeZ));
}

// usage:
rotateObject(myPlane, 40, 30, 20);
mrzz3bfm

mrzz3bfm3#

假设meshToRotate需要在X轴上旋转90度,然后执行以下操作。

var meshToRotate = new THREE.Mesh( geometry, material );

//Rotating mesh by 90 degree in X axis.     
meshToRotate.rotateX( Math.PI / 2 );
piv4azn7

piv4azn74#

在r96上测试,您还可以使用

mesh.rotation.setFromVector3(new THREE.Vector3( Math.PI / 2, 0, 0));
8ehkhllq

8ehkhllq5#

将Angular 转换为弧度值:

let radian = 2 * Math.PI * (p_angle / 360); //p_angle = your angle, example; 90 or 12, whatever angle
zsbz8rwp

zsbz8rwp6#

对于X轴,可以使用方法rotateX()

mesh.rotateX(Math.PI / 180 * 90)

例如:是1 º度步长

Math.PI / 180 = 0.17453292519943295

结果90 °为

0.17453292519943295 * 90 = 1.5707963267948966

https://en.wikipedia.org/wiki/Euler_angles

rotateX()
rotateY()
rotateZ()
guicsvcw

guicsvcw7#

另一种方法是设置网格的四元数

mesh.quaternion.set(0, Math.PI / 2, 0, 0);

或者更简单,无需覆盖其他值

mesh.quaternion.y = Math.PI / 2
fsi0uk1n

fsi0uk1n8#

我使用四元数来旋转对象。

function rotate( object, deg, axis ) 
  {
      // axis is a THREE.Vector3
      var q = new THREE.Quaternion();
       q.setFromAxisAngle(axis, THREE.MathUtils.degToRad( deg ) ); // we need to use radians
       q.normalize();
       object.quaternion.multiply( q );
   }

因此,要在Z轴上将对象旋转90度,我们将其称为

rotate( myMesh, 90, new THREE.Vector3( 0, 0, 1 );

或者如果你想随着时间的推移逐渐旋转它你可以使用slerp。并增加进度值,从0到1。

function rotateSlerp( object, deg, axis, progress )
{
    var q = new THREE.Quaternion();
    q.setFromAxisAngle( axis, THREE.MathUtils.degToRad( deg ) );
    q.normalize();
    object.quaternion.slerp( q, progress );
}

要使用它,您需要调用

let progress = 0;

function loop()
{
  progress += 0.05;
  rotateSlerp( myMesh, 90, new THREE.Vector3( 0, 0, 1), progress );
  requestAnimationFrame( loop );
}

相关问题