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?

@dfour

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

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

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

2 Likes

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