How do I make a child element ignore the size of its parent?

In general, I want the child to behave as if the parent has a size of 1, 1, 1, and I don’t want to create a group for the parent and for the child.

The following code helps in my question:

child.scale.x = 1 / parent.scale.x;
child.scale.y = 1 / parent.scale.y;
child.scale.z = 1 / parent.scale.z;

but what should I do after rotating the child

child.rotation.x = Math.PI / 4;

to prevent it from stretching?


Is this acceptable (nesting the child one level deeper):

const childGroup = new THREE.Group();
childGroup.add( child );

childGroup.scale.x = 1 / parent.scale.x;
childGroup.scale.y = 1 / parent.scale.y;
childGroup.scale.z = 1 / parent.scale.z;

child.rotation.x = Math.PI / 4;

The nesting is parentchildGroupchild. The scaling is done in the childGroup, the rotation is done in the child.

– Pavel


Your answer works for me, thank you. I thought that here it was necessary to do some manipulations with matrices and I don’t understand that part of the library unfortunately.

1 Like