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

Question

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

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 ?

Answer 1

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

Answer 2

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

Answer 3

Tested on r96, you can also use

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

Answer 4

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