How to rotate cube in matrix 4?

Questions
1

I need help, how to rotate the cube by 90 degrees. But I got a result like this and the size changed?
image

my code

   const radians = 90 * (Math.PI / 180);
    this.cube.matrix = new THREE.Matrix4().compose(
      new THREE.Vector3(position[0], position[1], position[2]),
      new THREE.Quaternion(radians, 0, 0, 0),
      new THREE.Vector3(1, 1, 1)
    );

The second question, how can I get the 90 degree score earlier. ?

2

You dont have to rotate using a mat4. But you can…

Axis:
this.cube.rotateX( Math.PI * 0.5 );

Rotation
this.cube.rotation.set( Math.PI * 0.5, 0, 0 );

Quaternion From Euler

var newRotateFromEuler = new THREE.Euler( Math.PI * 0.5 , 0, 0 );
this.cube.quaternion.setFromEuler( newRotateFromEuler  );

Matrix

const position = new THREE.Vector3( 0, 0, 0 );
const quat = new THREE.quaternion.setFromEuler( new Euler( Math.PI * 0.5 , 0, 0 ));
const scale = new THREE.Vector3( 1, 1, 1 );
      cube.matrix.compose( position, quat , scale  );
3

Thanks for the answer.
However when I tried set scale to const scale = new THREE.Vector3( 0, 0, 0 );. The cube disappear.

Btw the reason I’m using matrix 4 is because I’m using another library that requires the use of matrix.

4

This will set the scale to zero so the cube disappearing is correct. To keep the initial size you probably want (1,1,1).

1 Like
5

Sorry, so whats wrong with my code ? It is rotated but the size changed and the initial size is symmetrical.

6

The quaternion is incorrect, that might be the issue. Quaternions have x, y, z, w components but they don’t correspond directly to the x, y, z axes. So this will not be an x-rotation which I guess is what you want:

const radians = 90 * (Math.PI / 180);
new THREE.Quaternion(radians, 0, 0, 0);

Instead you can do this:

const xAxis =  new Vector3( 1, 0, 0 );
const q = new Quaternion().setFromAxisAngle(xAxis, radians);
1 Like
7

Sorry about that. I was obv trying to reply too quickly! Loeee’s answer is correct.