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

01 Dec 2023, 00:00

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 ?

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

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

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

Convert your angle to radian value:

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

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

ncG1vNJzZmirpJawrLvVnqmfpJ%2Bse6S7zGiorp2jqbawutJoaXJxYGyCdIKOoaawZZOWu261jKumrZmkmnqiecyeqqFlkq56enyMnZygqpWawG61zWaroaqVmre0

 Share!