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

JavascriptMatrix3dRotationthree.js

Javascript Problem Overview


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 ?

Javascript Solutions


Solution 1 - Javascript

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

Solution 2 - Javascript

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

Solution 3 - Javascript

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

Solution 4 - Javascript

Tested on r96, you can also use

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

Solution 5 - Javascript

Convert your angle to radian value:

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionZaayView Question on Stackoverflow
Solution 1 - JavascriptAbsulitView Answer on Stackoverflow
Solution 2 - JavascriptHarun ERGULView Answer on Stackoverflow
Solution 3 - JavascriptprahadeeshView Answer on Stackoverflow
Solution 4 - JavascriptTibView Answer on Stackoverflow
Solution 5 - JavascriptFernando BasilioView Answer on Stackoverflow