When Scaling World Space UI Thickness of Image changes

Hey, I noticed when I change the scale or image dimensions the thickness of the image changes. How do I prevent it? I want ti keep image thickness uniformed no matter what scale of the image is.

Here is an example:

One option is to not have them as children of the scaled parents. You would need a script, that would locate parent’s position and place it to it (wihtout parenting). This way they all would be under the same parent and have the same scale.

Another option is to have a script that would change the scale of the child, proportionaly to how the parent is scaled. This would “unscale” the child under the scaled parent.

Hey @LeXXik

Thanks for the reply, I’m more leaned to try the second option, is there any example on how to do properly?

You can access the parent of an entity via this.entity.parent. So, it would look something like:

const parentScale = this.entity.parent.getLocalScale();
const scale = new pc.Vec3();

// clone original scale somewhere at start, then
scale.copy(originalScale).div(parentScale);

this.entity.setLocalScale(scale);

Here is an example. Planes are children of scaled boxes:

https://playcanvas.com/project/1158001/overview/preserve-child-scale

1 Like

This is great! But I don’t scale parent, the parent’s scale is always [1, 1, 1].
I need to scale world UI based on bounding box so the UI is always visible.

Out of curiosity, does it need to be 3D UI? Would it work to use 2D UI who’s position is set based on the world position of the desired hotspot? This way, the UI would always be visible and of a consistent size.

1 Like

It doesn’t have to be necessary 3D UI, I just want to use that ring as rotation handle for the furniture

If you want a circle of different size (radii? radiuses?), but having the same width, I would use a mesh API. There is an engine only example for a plane, but the principle is same:

https://playcanvas.github.io/#/graphics/mesh-generation

I can make an example sometime later this week.

1 Like

Thank you that would be really helpful!

Made an example:
https://playcanvas.com/project/1158818/overview/mesh-circle

2 Likes

Thank you so much, this is great!