Problem with rotation (pitch, roll, yaw)


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:

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?

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.

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

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

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


That is exactly what was missing. Thanks!

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.

would be great if you could share a playground

I think this should work:

        const quat = BABYLON.Quaternion.FromEulerAngles(
        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


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

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


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