Hey,
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:
https://codepen.io/boytchev/full/qBQNmMZ
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.
As a proof-of-concept I picked a GLTF model which is not mine – so it has not been designed specifically for this demo. I would consider it a complex model, as it has subobjects.
When the [Expand] button is clicked, the model is cloned into three copies – one expanded along X, another one along Y and a third one along Z.
The model is expanded, not scaled, thus peripheral shapes are preserved and only the central parts are stretched. Try it here:
https://codepen.io/boytchev/full/yLQJZdr
PS. Currently the model is expanded in respect to its central point, it might not be the best one for this tractor, but still it is good for demonstration purpose.
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.
https://codepen.io/boytchev/full/VwVjOre
Thanks alot for the detailed answers! I will try this concept and see if i can realize it without the UV stretching.
Hey @PavelBoytchev,
i am using this technique to expand custom models.
I discovered, that the frustrum culling is off when doing it so i checked your example again and same there:
Do you know why it is off? I dont want to disable frustrum culling
Maybe the bounding boxes and spheres are the old ones? Does it improve if you recalculate them after manipulating the vertices?
No it does not work. I tried .computeBoundingBox() in my code but it did not resolve the issue
When I update the bounding box and the bounding sphere of each geometry in the model, it appears to work fine.
Ahh i have to compute both 
sorry i just tried with computeBoundingBox(). Thanks for the quick help!!
