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:

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 ?

1

8 Answers

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

4

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

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

Tested on r96, you can also use

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

2

Convert your angle to radian value:

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

1

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

rotateX()
rotateY()
rotateZ()

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

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

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.