Setting parent of mesh in diffferent ways causes different behavior

Use a Parent - Babylon.js Documentation says that the following 3 ways of setting a mesh parent are equivalent (at least that’s what I read):

// const child1, grandchild1: Mesh
grandchild1.parent = child1;   // A
child1.addChild(grandchild1);  // B
grandchild1.setParent(child1); // C

While they don’t seem so in this demo (see line 44~): A places grandchild1 at corner of child1 as I expected, but B C doesn’t.

Is this a bug in demo or somewhere else?

See what happens when you move the positioning of the grandchild to after parenting

This is explained (but possibly not very well) in the section of the docs

The following playground shows that transformations prior to parenting are kept for all three methods

The next three playgrounds show that transformations are relative to the parent

It is better to set positions etc after parenting

1 Like

That’s because using the parent property does not update the mesh transformation, whereas using setParent / addChild do.

See docs for setParent: The node will remain exactly where it is and its position / rotation will be updated accordingly.

Note that the doc for addChild does not say so, but it is calling setParent internally.


Thanks all, I didn’t notice the difference at first.

My new understanding is that (sorry for being tedious, these concepts are quite new to me :o ):

  • c.setParent(p) / p.addChild(c) keeps c’s world coordinates (“remain exactly where it is”), by recomputing c’s ‘own’ transformation.
  • c.parent = p keeps c’s ‘own’ transformation, and may cause c to move in terms of world coordinates.

Any transformations for a mesh are kept in its worldMatrix. Unless an particular function updates the worldMatrix it is not updated until the render phase.

c.position = newPosition
c.parent = p in the render phase goes update worldMatrix of c, set c’s parent to p and apply the worldMatrix using p as the origin

c.setParent(p) / p.addChild(c) these function update the worldMatrix prior to the render phase and the update goes take the newPosition for c, calculate the position of c relative to p so that c remains in the same world position then calculate the worldMatrix