CODEWITHSUNDEEP
javascriptmatrix3drotationthree.js
Zaay
Zaay

Reputation: 662

How can I rotate a mesh by 90 degrees in ThreeJS?

I have a mesh that I want to rotate by 90 degrees inside Three JS. Here is the image of the current situation: enter image description here

I want the selected mesh to be rotated parallelly to the large mesh. I have tried rotating the matrix like this:

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

But the mesh goes into strange rotations. Is there any easier way to rotate it by 90 degrees ?

Upvotes: 73

Views: 164991

Answers (8)

Fancy Boy Epic
Fancy Boy Epic

Reputation: 91

I use quaternions to rotate the objects.

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

So to rotate object by 90 degrees on the Z axis we would call it like

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

Or if you want to rotate it gradualy over time you can use slerp. And increase the progress value that goes from 0 to 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 );
}

To use it, you would call

let progress = 0;

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

Upvotes: 1

Xavier Araque
Xavier Araque

Reputation: 79

For X axis you can use method rotateX()

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

For example: is a 1º deg step

Math.PI / 180 = 0.17453292519943295

Result 90º is

0.17453292519943295 * 90 = 1.5707963267948966

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

rotateX()
rotateY()
rotateZ()

Upvotes: 6

Terminat
Terminat

Reputation: 1237

Another way would be to set a quaternion of the mesh

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

Or even simpler without overriding other values

mesh.quaternion.y = Math.PI / 2

Upvotes: 0

Fernando Basilio
Fernando Basilio

Reputation: 41

Convert your angle to radian value:

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

Upvotes: 4

prahadeesh
prahadeesh

Reputation: 323

Let's say meshToRotate needs to be rotated by 90 degrees in X axis. Then do the following.

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

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

Upvotes: 12

Harun ERGUL
Harun ERGUL

Reputation: 5942

You can rotate an object by using this function:

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

Upvotes: 33

Tib
Tib

Reputation: 2631

Tested on r96, you can also use

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

Upvotes: 5

Absulit
Absulit

Reputation: 1955

The threejs rotation uses Radians (as you might know)

you can use this

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

or

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

Upvotes: 96

Related Questions