Problem with rotation (pitch, roll, yaw)

Questions
1

Hi,

I’m developing an app to show 3D models created from photos. The first context capture (BlocksExchange XML/XMLZ format) tool creates a GLTF model from thousands of photos. Photos are made by drones that fly around the tower.
My goal is to show places in the viewer where the drone took a picture and point it at the specific angle that the camera was positioning.
I get information in these form:
{
position: {
x: -11.4732765262581,
y: 10.2428019459443,
z: 47.219992244195,
},
rotation: {
yaw: 135.71985665112,
pitch: -16.2454216756075,
roll: 0.165752425305601,
},
name: ‘DSC04627_t.JPG’,
},

My problem is that I can’t properly rotate created planes. I tried to use this :
mesh.rotation = new BABYLON.Vector3(pitch, yaw, roll);
(from the documentation: BabylonJS Guide) but it won’t work.
I think that the problem is that Babylon js use the left-handed system and I got data uses a right-handed system. I suppose changing yaw, pitch, roll to left-handed data should work, but I don’t know how to do it. Or maybe it’s not the case.

I also created a playground to show what I mean:

2

Bablon supports right handed systems (using the scene.useRightHandedSystem = true), but that doesn’t seem to be solving the issue. it is probably the order in which the rotation is applied,

I am not sure what the expected result should look like though, so it is hard to say what the issue is.

Right handed system uses a negative z axis (which is, in your case the y axis?) where babylon uses positive, so it is not just a matter of fixing the rotation. Setting the position correctly doesn’t seem to be helping as well. Also, seeing the tower is 1 unit wide and that the x values of some of the elements are more than 1 unit apart makes me wonder if the units actually provide any proximity to the tower itself?

3

The expected result is all planes are faced to tower (center of the scene).
I also tried to apply yaw, pitch, roll to rotation in any possible orders and any of the results solve the problem.

4

For information official docs ref is Rotation Conventions | Babylon.js Documentation

Though this does not help you as information is the same.

5

It looks like you just need to convert your rotation from degrees to radians.

6

That is exactly what was missing. Thanks!

7

Ok, so I got this, but now I’ve got another question. How to calculate normal using yaw, pitch, roll without creating a mesh plane. I tried to do something like:

  const matrix = Matrix.RotationYawPitchRoll(
    (photo.rotation.yaw * Math.PI) / 180,
    (photo.rotation.pitch * Math.PI) / 180,
    (photo.rotation.roll * Math.PI) / 180,
  );
 const plane = new Plane(0, 1, 0, 0).transform(matrix);
 const normal = plane.normal

but it didn’t work. I have strong feelings that it should be easy but I’m stuck again.

8

would be great if you could share a playground

9

I think this should work:

        const quat = BABYLON.Quaternion.FromEulerAngles(
            photo.rotation.pitch*Math.PI/180,
            photo.rotation.yaw*Math.PI/180,
            photo.rotation.roll*Math.PI/180);
        const rotMat = BABYLON.Matrix.Identity();
        BABYLON.Matrix.FromQuaternionToRef(quat, rotMat);
        const normal = BABYLON.Vector3.TransformNormal(new BABYLON.Vector3(0, 0, 1), rotMat);

edited: Changed BABYLON.Vector3.TransformCoordinates to BABYLON.Vector3.TransformNormal

10

You could also just do this if those meshes are available:

const normal = mesh.getDirection(new BABYLON.Vector3(0, 0, 1));

11

This is exactly what I was trying to do. Thanks! You made my day (again).