I am trying to create a wooden Frame that can be scaled in its width and height by the user.
My first approach was to cut the frame into corner parts, vertical parts and horizontal parts and position and scale them. That worked as intended but i could not get the right texturing in the corners to work. Here is a image of what that approach looks like:
Recently i came across morphTargets in threejs and i thought it would be a much better approach to this problem. So i created a frame in Blender with shape keys for width and height of the frame. I made four different frame parts: left, upper, right and lower. Here is the Blender file:
And it looks way better but it is still not 100% accurate, because if i increase the height and scale the texture with the parts the uv in the corners of the mesh get stretched. Here is a video to show the texture stretching:
Any hints on how to solve this issue would be great. Maybe there are some approaches i havent even thought of.
I’ve come across this problem several times now when working with parametric models. I think you have a few options and the first one seems to fit your case the best:
Since you’ve separated the edge and the meshes you’re morphing seem to be basically a cuboid, you could avoid the complexity of modifying UV maps and simply scale the texture X/Y repeat values.
If you wanted to include the edge and make do with a single mesh, you could prepare a UV map where you’d seam cut and distribute each side of the mesh as its own UV island around the same origin, basically mimicking how your mesh is physically laid out. Then you could move (not scale, that would eventually deform the texture due to the diagonal edge) the relevant UV coords in the direction of your morphTarget transformation.
In more complex cases you can work with several UV maps - a base and one more for each shape key / morphTarget extremity. Then you can interpolate the active UV map by calculating the deltas between the base and the target UV coords multiplied by the influence ratio.
