Rotate a plane in 2 axis

Questions
,
1

1

Hello, how to make a rotation of my plane in Y and X to have a straight object horizontally and tilted at 45°

trying :
plane.rotateX(Math.PI / 180 * -45);
plane.rotateY(Math.PI / 180 * 90);

it spins me weirdly sideways

Thanks in advance for any help or suggestion

2

Is this what you are trying to achieve

plane.rotation.x = Math.PI / 180 * -90;
plane.rotation.y = Math.PI / 180 * 45;

Here is a good tutorial about 3D rotations, Describing rotation in 3d with a vector, next step Gimbal lock then good luck with the quaternion (4D rotation)

3

Add this to your code so you could see axes:

const hlp = new THREE.AxesHelper(1);
scene.add(hlp);

Red axis is X, green is Y and blue is Z.

4

HiFennec & tfoller … i have not this result :

it’s a mix of the 2: a little tilted and a little crooked on the 2 axes … I don’t understand what changes in your code

const video04 = document.createElement('video');
video04.muted = true;
video04.autoplay = true;
video04.loop = true;
video04.crossOrigin = 'anonymous';
video04.setAttribute('webkit-playsinline', 'webkit-playsinline');
video04.src = 'videos/flat.mp4';
video04.load();
video04.play();

const texture04 = new THREE.VideoTexture(video04);
texture04.needsUpdate;
texture04.minFilter = THREE.LinearFilter;
texture04.magFilter = THREE.LinearFilter;
texture04.format = THREE.RGBAFormat;
texture04.crossOrigin = 'anonymous';

const geometry04 = new THREE.PlaneGeometry( 0.345, 0.22, 1 );

const material04 = new THREE.MeshBasicMaterial( { map: texture04} );
const plane04 = new THREE.Mesh( geometry04, material04 );

plane04.position.set( 2.35, 0.80, -1.26);
plane04.rotateX(Math.PI / 180 * -45);
plane04.rotateY(Math.PI / 180 * 90);

scene.add( plane04 );

but yes, I would like to have the proposed result as in the fiddle

by default I have to make a rotation of 90° so that my plane is displayed in front of the camera. Then make a tilt of -45 to be able to adjust it to a laptop mesh where the screen is tilted slightly backwards

for me the Y rotation makes it turn towards the lower right side of the plane by 45° and not tilt it

thanks for help :slight_smile:

5

replace

plane04.rotateX(Math.PI / 180 * -45);

with

plane04.rotateZ(Math.PI / 180 * 45);
6

I don’t know why I was stubborn about X and Y but yes: Y and Z and it works :slight_smile:

Thanks again ! & a happy new Year :slight_smile:

7

which is weird: I have to put the code in this order: rotateZ then rotateY for it to work, otherwise not


plane04.rotateZ(Math.PI / 180 * 25);
plane04.rotateY(Math.PI / 180 * 90);

Best regards

8

As I mentioned before - use AxesHelper, it helps, pun intended :wink:

Yaw Pitch and Roll is not an orthogonal system, like Cartesian, so order of operations matters.

9

this is my first big ThreeJs project, I didn’t know that the order of declaration of the axes mattered so much… anyway thanks for the help :slight_smile:

1 Like