I created two irregular shapes (meshes) and assumed that if I wanted one mesh to be a superset (surround) of the other, I could simply scale it. However, this approach doesn’t seem to work for irregular shapes.
Thinking the issue might be related to my orthographic camera setup, I tested it by creating two circles, which scaled correctly.
I was aiming for something like this (see attached image 1.jpg),
Although I achieved my desired outcome using a fat line addon (Line2), I’m posting this to understand why scaling didn’t work as expected with irregular mesh and to gain further insight. Additionally, I’d like to expand my toolkit so that if I encounter performance issues in the future, I’ll have alternative solutions to choose from.
I am not well-informed on Three.js terminology, so don’t hesitate to ask for clarification.
Here is an oversimplified illustration. The black shape is twice bigger than the yellow shape. How would you fit the yellow U-shape inside the black U-shape and keep consistent width of overlapping?
One way to achieve this is instead of “scaling”, moving the vertices along their vertex normal.
This is kind of like a “expanding” operation. It’s not super rigorous, but it’s often used to create outline effects like this at runtime/realtime.
It doesn’t work if your geometry isn’t “smooth”. for instance a flat shaded box, when “expanded” would appear to have the faces detached and exploded outwards.
However if you take the same box, make sure the vertices are “merged” such that each face is sharing vertices with other faces connected to it… then .computeVertexNormals() on the geometry… you can get roughly the effect you’re going for.
So for the U shaped yellow thing… you would scale it up to whatever you want, then generate the black outline geometry from that scaled yellow geometry, via normal expansion.
