I’m building a door configurator where the user can scale the door without the UVs and the geometry stretching. My solution is to split the door in different parts. I scale the middle Part and just position the outer Part of the door (see image).
Question is there a better way to realize scaling without stretching? I’m using Blender models and load them into three.js. The Problem with my method is, that there are gaps sometimes, because of the calculations made (as in the screenshots).
Your solution is the most straightforward. However, if I were making something similar, I would use a texture atlas (with all subtextures - 4 corners, 4 sides and middle). The door will be a rectangle with intermediate vertices. When the door is resized, I will only change the position of the intermediate vertices (and maybe their UVs).
What do you mean with intermediate vertices? I honestly dont understand your answer fully:) I understand what a texture atlas is but not how it helps with my problem. If you mean to reposition the outer vertices of the object how can i do that with a custom object plus changing its UV accordingly?
Here is an attempt to illustrate. The black dots are vertices. When the door is scaled, the positions of internal vertices are not scaled proportionally, but in such a way, that their distance to the nearest edge is kept fixed. In this way textures in the corners (blue circles) will stay with their original size.
In case the illustration is unclear, here is demo code. There is a plate with rounded corners. The size is changed randomly every second second. The roundness of the corners is kept undisrtorted – this can be seen in the wireframe – the corners are not deformed by scaling, only the distances between corner areas are changed. This is implemented by the function rescale(), lines 88-104:
with that solution i still have to get access to the perfect few vertices in a complex model. I understood your way, but i need to move the right vertices how can i access them in a glb format? Ultimately i also have to change the UV accordingly right?
I assume that if you can split the object into 9 parts, then you have access to the object, so you can design it in such a way, that it is easy to split the vertices. In the worst case, you can assign custom attributes like vertex color, but I don’t see it necessary for a door.
I have no idea how complex your model is. Whether it is a single mesh, or is a collection of several objects.
Modification is done after the model is loaded, so it uses the Three.js structure, not the GLB format. If you want to generate GLB with modified vertices, you may try original GLB → load into Three.js → modification → export to GLB.
Most likely UV can be left unchanged → this is what I expect without trying it out.
Let me try it with the Earth. It is expanded in X, Y and Z, keeping the texture on the round part intact. Only the “belt” of expansion is stretched. The positions of vertices are changed, but the UV coordinates are not modified.