Coordinate Transformation

The first step in understanding coordinate transformation Babylon.js is to understand how the data describing a mesh is stored. The positions of each vertex is kept in an array of coordinates in the local space of the mesh. Each transformation applied to the mesh is stored in a matrix called the World Matrix. For each rendered frame the current World Matrix is used on the local space vertex data to obtain the world data for the mesh. Except for exceptional circumstance such as baking a transformation or a user updating it, the mesh vertex data remains unchanged.

When you want one mesh, mesh_C, to locate in the frame of reference of another mesh, mesh_P, using coordinate transformation you use the transformCoordinates function to apply the world matrix of mesh_P to the required position.

For example take a box, a cube of size 1. In the local space of the box the center of the top face is at (0, 0.5, 0). We want a red sphere to be located at the center of the bottom face of the box at this position.

useEffect(() => {
    new AxesViewer(scene, 1);
    const matrix = boxRef.current!.computeWorldMatrix?.(true) as Matrix; // force calculation of world matrix
    const local_pos = new Vector3(0, -0.5, 0); //bottom middle of box relative to box
    const global_pos = Vector3.TransformCoordinates(local_pos, matrix); //calculate world position
    sphereRef.current!.position = global_pos; //position sphere relative to world
}, []);
 
// ...
 
<>
    <box ref={boxRef} name='box' position={new Vector3(1,2,3)} rotationY={Tools.ToRadians(45)} />
    <sphere ref={sphereRef} name='sphere' options={{ diameter: 0.5 }}>
        <standardMaterial name='sphere-material' diffuseColor={Color3.Red()} />
    </sphere>
</>

Learn More

For properties and additional context, please refer to Babylon.js documentation: https://doc.babylonjs.com/features/featuresDeepDive/mesh/transforms/center_origin/ref_frame.