AbstractMesh rotation problem


I am trying to set proper rotaion on meshes (AbstractMesh). I have a service that returns coordinates for specific mesh (positions and rotations). And I am sure that values returned by this service are correct. When I first apply coordinates from the service to mesh (about 26 of meshes - for each of them) everything is correct. I do not know why, byt when I assigne x position to every mesh for the first time only, I need to negate the value, but that is not the topic.

After loading all meshes into scene. It looks like this:

Now my job is to rotate let’s say the red wall. I found the solution to create animation, but when it ends, I want to reposition my meshes (so that one mesh should be positioned in the place of another mesh) and reassign positions and rotations. There is no problem with assigning new set of positions, but I have a problem with assigning new set of rotations (retrieved from the same service that I mentionad earlier).

The problem is that angles are broken. Like this:

I fugured out that if I want to make rotation around x and y axes, I need to do that in specific order, and my assigning logic is as follows:

private assignRotations(blockMesh: BABYLON.AbstractMesh,
      coordinates: PuzzleBlockCoordinatesModel) : void {
    const currentRotationX = (blockMesh.metadata?.currentRotationx ?? -0) * -1;
    const currentRotationY = (blockMesh.metadata?.currentRotationy ?? -0) * -1;
    const currentRotationZ = (blockMesh.metadata?.currentRotationz ?? -0) * -1;
    if (currentRotationZ !== 0) {
      this.rotateAgainstVector(blockMesh, 0, 0, 1, currentRotationZ, 'z');
    if (currentRotationY !== 0) {
      this.rotateAgainstVector(blockMesh, 0, 1, 0, currentRotationY, 'y');
    if (currentRotationX !== 0) {
      this.rotateAgainstVector(blockMesh, 1, 0, 0, currentRotationX, 'x');
    if (coordinates.rotationX !== 0) {
      this.rotateAgainstVector(blockMesh, 1, 0, 0, coordinates.rotationX, 'x');
    if (coordinates.rotationY !== 0) {
      this.rotateAgainstVector(blockMesh, 0, 1, 0, coordinates.rotationY, 'y');
    if (coordinates.rotationZ !== 0) {
      this.rotateAgainstVector(blockMesh, 0, 0, 1, coordinates.rotationZ, 'z');

  private rotateAgainstVector(blockMesh: BABYLON.AbstractMesh,
      vectorCoordinateX: number, vectorCoordinateY: number,
      vectorCoordinateZ: number, angleRadian: number,
      axisLowerCase: string) : void {
    const rotationVector = new BABYLON.Vector3(vectorCoordinateX,
      vectorCoordinateY, vectorCoordinateZ);
    blockMesh.rotate(rotationVector, angleRadian, BABYLON.Space.WORLD);
    blockMesh.metadata[`currentRotation${axisLowerCase}`] = angleRadian;

As you can see, I am storing previous rotations angles in mesh metadata (at first assignment, the metadata object has no properties), and If I want to assign new angles, I am first ‘undoing’ the old ones. But it produces the result like in the second picture.

For example, lets take the black mesh with white top wall from second picture - it should be rotated the same way as top left corner of red wall from first picture is. The idea is that I want to remove old rotation angles (from when the mesh was positioned in bottom left corner of red wall) and assign new.

I will be thankfull for any idea of what I am missing here.

This is really hard to troubleshoot without a repro in the playground unfortunately :frowning: Could you create one for us ?

Hello @Michal just checking in, are you still having issues? If so, are you able to provide us with a playground to reproduce it? One important thing to keep in mind with rotations is that there are different conventions in the computer graphics world of what order to apply rotations in: Euler angles - Wikipedia

So you should check what order your provider expects, and reproduce the same order in Babylon: Mesh Rotation | Babylon.js Documentation (babylonjs.com)