Scaling objects, how not to scale their children?

Questions
1

Is there a setting not to scale object’s children?

Thanks.

1 Like
2

No. You have to manually undo the scaling for child objects like in this example:

https://jsfiddle.net/f2Lommf5/16245/

3

You have to do it manually, but it should be a simple equation to counteract the parent’s scale. Just divide one by the parent’s scale:

var newScale = 3.0;
parentMesh.scale.set(newScale, newScale, newScale);

var childScale = 1.0 / newScale; // <- this will negate the parent's scaling
childMesh.scale.set(childScale, childScale, childScale);
4

Is there an easy way to do this in react-three-fiber?

Presumably, I need to update the child’s scale before the object is rendered. I tried adding onBeforeRender as a prop for the child. But this function does not give access to the object.

Any help will be appreciated. Thanks.

5

y’all are doing it wrong :smiley: instead of papa → [child1, child2, … ] you want newPapa → [papa, child1, child2, … ] - now you could scale papa without scaling childX AND move/rotate them all together

6

Thanks for the comment. The “newPapa” approach should work for the original question.

But it will not work for my case, because I want to avoid child scaling only in X direction. I still need the child to be scaled in Y and Z directions.

7

And to you, sir, I’d like to say that this

makes no sense. Pls see jsfiddle

8

Thank you. I was wrong. I was using arrow function to handle onBeoforeRender, which is why I cannot access “this”.

I changed the handler to a regular function. It did apply rescaling to the child. But I ended with the three js drawing the original scale first then drawing the new scale. Please see the CodeSanbox example.

I am confused, because child should have already been rescaled before rendering.

9

You probably want to add this line:
изображение

10

Thank you so much for helping me find where the problem is. I forgot that adjusting the child’s scale will change the world scale to be fixed in the next render.

The code now should work now but somehow I’m still not getting the right scale. The child should have been rescaled to 1 in x direction.

It seems that getWorldScale method is causing side effect. Commenting it on or off will get different results. Does it seem normal to you? Thanks.

image
image1647×710 80.3 KB

11

I tried to play with your codepen and either 1 / worldScale.x or 1 / 2 seem to produce identical results for me :man_shrugging:

12

Thank you for helping me. I appreciate it. But that is not what I meant.

What I meant is that the following command is causing a side effect.

this.getWorldScale(worldScale);

If you comment out this command in my sandbox, you will see the child’s scale changes. I did not use worldScale to change the child’s scale. It’s getter method. Why should it change things?

13

probably because it recalculates the matrices

14

Thank you.

I added another world matrix update command after I rescale the child. Now it works. :smile:

this.scale.set(1 / worldScale.x, 1, 1);
this.updateMatrixWorld();

It makes senses that three.js does not recalculate local-to-world transformation in onBeforeRender, so I need to manually ask it to update after I changes child scale.

1 Like