69

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 ?

Zaay
  • 622
  • 2
  • 8
  • 23

8 Answers8

93

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));
Absulit
  • 1,885
  • 1
  • 17
  • 17
  • 2
    Worked great. Thanks! – Hugo Nava Kopp Apr 04 '16 at 19:27
  • 5
    `mesh.rotation.set(new THREE.Vector3( 0, 0, Math.PI / 2));` don't work on r96. use `setFromVector3` instead of `set` – Tib Oct 08 '18 at 15:32
  • 2
    `mesh.rotation.set(0, 0, Math.PI / 2)` is Ok with r101. Using `rotation.set()` with a Vector3 gives `NaN` values in properties `matrix` and `matrixWorld` which makes your object disappear from the scene, showing nothing in console. – Maxime Pacary Feb 11 '19 at 20:59
  • That is because `mesh.rotation` is a `THREE.Euler` and not a `THREE.Vector3`, this is a different object type. – Felipe Jul 03 '19 at 07:10
33

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);
CrazyTim
  • 6,695
  • 6
  • 34
  • 55
Harun ERGUL
  • 5,770
  • 5
  • 53
  • 62
  • 11
    NOT good `THREE.Math.degToRad()` or `THREE.Math.radToDeg()` –  Aug 19 '16 at 13:50
  • 1
    That is inefficient as it will trigger 3 matrix multiplications instead of one. Would be ok if you want to interact with a single mesh, for example manipulation by user but not recommended if you call that repeatedly for eg an animation ... – Felipe Jul 03 '19 at 07:19
10

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 );
Wang Liang
  • 4,244
  • 6
  • 22
  • 45
prahadeesh
  • 303
  • 2
  • 7
5

Tested on r96, you can also use

mesh.rotation.setFromVector3(new THREE.Vector3( Math.PI / 2, 0, 0));
Tib
  • 2,553
  • 1
  • 27
  • 46
4

Convert your angle to radian value:

let radian = 2 * Math.PI * (p_angle / 360); //p_angle = your angle, example; 90 or 12, whatever angle
Fernando Basilio
  • 41
  • 3
  • As you are new to the StackOverflow community. Please format the code part of your answer as per the guidelines. https://stackoverflow.com/help/how-to-answer That would improve the readability. – Dev Utkarsh Jun 24 '21 at 19:10
3

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()
Xavier Rendergraf Araque
  • 51
  • 1
0

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
Terminat
  • 1,199
  • 5
  • 21
0

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 );
}
Fancy Boy Epic
  • 71
  • 3