Title: GizmoManager Gizmo Creation Position Issue and Pivot Point Behavior Inquiry

Questions
1

Question

I am using Babylon.js’s GizmoManager to create gizmos for a specific mesh. However, the gizmos are created at unexpected positions, and I would like to fully understand how this works. Here are the issues I encountered:

  1. What determines the gizmo’s position when using GizmoManager?
  • The official documentation states that the gizmo is created based on the mesh’s Pivot Point, but my tests show that it appears to rely on world coordinates instead.
  1. The relationship between Pivot Point, Bounding Box, Local Position, and World Position
  • When I create a mesh using VertexData, the gizmo always appears at (0, 0, 0), even though the mesh’s Bounding Box seems to be correctly calculated and centered.
  1. The gizmo appears to be created based on the World Position rather than the Pivot Point.
  • Even after manually setting the Pivot Point to the mesh center, the gizmo does not move to the desired location.

Context

  • Mesh Creation: I am creating meshes using the following approach. I apply VertexData to the mesh and then set its position and Pivot Point.
const c_mesh = new BABYLON.Mesh(mesh3D.name, scene);
c_mesh.id = mesh3D.id;

const c_vertexData = new BABYLON.VertexData();
c_vertexData.positions = new Float32Array(Object.values(mesh3D.geometry?.vertices || {}));
c_vertexData.indices = Array.from(Object.values(mesh3D.geometry?.indices || {}));
c_vertexData.applyToMesh(c_mesh);

// Set mesh position
c_mesh.position.y = mesh3D.metadata?.transform?.position?._y || 0;
c_mesh.position.x = mesh3D.metadata?.transform?.position?._x || 0;
c_mesh.position.z = mesh3D.metadata?.transform?.position?._z || 0;

// Recalculate Bounding Box
c_mesh.refreshBoundingInfo();
  • GizmoManager Setup: I attach the gizmo to the mesh using GizmoManager.
const gizmoManager = new BABYLON.GizmoManager(scene);
gizmoManager.attachToMesh(c_mesh);

Attempts to Solve

  1. Set Pivot Point to the center
  • I calculated the Bounding Box center and set it as the Pivot Point, but the gizmo still appears at (0,0,0).
const boundingInfo = c_mesh.getBoundingInfo();
const boundingCenter = boundingInfo.boundingBox.center; // Local coordinates
c_mesh.setPivotPoint(boundingCenter);
  1. Recalculate Bounding Box
  • I manually recalculated the mesh’s Bounding Box to ensure it reflects the gizmo’s position.
c_mesh.refreshBoundingInfo();
  1. Force gizmo position update
  • I tried to forcefully update the gizmo’s position using GizmoManager, but it keeps referencing the mesh’s Pivot Point.
if (gizmoManager.gizmos.positionGizmo) {
    gizmoManager.gizmos.positionGizmo.updateGizmoPositionToMatchAttachedMesh();
}

Questions

  1. What exactly determines the position of the gizmo in GizmoManager? Does it reference the Pivot Point, World Position, or Local Position?
  2. Why does a mesh created using VertexData always result in a gizmo being created at (0,0,0)?
  3. What additional steps are required to correctly set the Pivot Point and have the gizmo appear at the center of the mesh?
2
  1. From a this test and a quick look at the code to refresh memory, local 0,0,0 is used for gizmo.

  1. local 0,0,0 is independant of vertexData.

  2. pivot is a local coordinate. its world position is dependent of mesh local to world matrix.

3

Thank you for your response. @Cedric

I apologize for not fully understanding your explanation, as I am still new to Babylon.js.

From what I understand, the local origin (0,0,0) is independent and serves as the reference point for gizmo creation.

Should I move the local origin (0,0,0) to the center of the mesh, or should I manipulate the world matrix to achieve the desired result?

As 3D development is a new field for me, I kindly ask for your patience with my slow understanding.

4

World coordinate is computed as local coordinate transformed by the mesh matrix .
Did you see tutorials like LearnOpenGL - Coordinate Systems ?
You won’t have to understand a lot of math but the coordinate system is very important.