How can I rotate a mesh by 90 degrees in ThreeJS?
JavascriptMatrix3dRotationthree.jsJavascript 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:
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