Gribz
December 31, 2022, 3:23am
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

Fennec
December 31, 2022, 12:22pm
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)

tfoller
December 31, 2022, 12:23pm
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.

Gribz
December 31, 2022, 2:46pm
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

tfoller
December 31, 2022, 5:42pm
5
replace

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

with

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

Gribz
January 1, 2023, 2:52am
6
I don’t know why I was stubborn about X and Y but yes: Y and Z and it works

Thanks again ! & a happy new Year

Gribz
January 1, 2023, 2:55am
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

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

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

Gribz
January 1, 2023, 8:29am
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

1 Like