Why applied texture is stretched on loaded model?


could someone please explain me how to get non-stretched texture on the loaded model? Here is a live demo threejs wood texture model - CodeSandbox

I tried woodtexture.wrapS = woodtexture.wrapT = THREE.RepeatWrapping; setting but no help

Here is what I’m getting

Is it something I need to change with texture image itself?



Depends on how the model was UV-unwrapped in Blender / 3D modelling software.

Since its a more complicated model, you are best off to fine tune it in a 3D modeling program like Blender. If its a seamless texture, you can try to repeat the texture if you want to do it with code. Otherwise i advise a couple of minutes in Blender. If its not a seamless texture, well, you can technically mirror the geometry UVs, so you can get it seamless at the center of the texture.

1 Like

Great, thank you both for point me in a right direction. I don’t use Blender but F360 so this short clip did the trick https://www.youtube.com/watch?v=C-L0pJywTzo .

Btw since I’m a developer not a designer I was wondering is there any open source script or program that I can use to do UV mapping of complex 3D object/models? I don’t need any super realistic UV mapping but at least avoid strected texture. So I would like to enable for my users to do UV mapping in the background of any model they upload and visualize.

Tri-planar mapping is what you most likely are looking for (docs 2.)

It’s quite super simple and easy to code, but requires modification of shaders. There are some ways to add it to three (it’s not officially supported) - see here for example - but there’s no widely popular / maintained opensource addon for three that I’m aware of (there’s three-landscape, it does use tri-planar mapping combined with hex-tiling, but it’s quite expensive to use and it’s purpose it a little more complex than just doing the automatic UV mapping which can be done with 3 lines of GLSL :sweat_smile:.)

1 Like

I dont think there is a script that will give you any good results, if you have a complicated model, you need to be able to mark the seams and scale the UV islands correctly, and applying the texture right will need some fiddling. If you wish to find a program that UV unwraps, then pretty much all 3D modeling programs can do that. But if you want users to casually unwrap their UVs and apply textures in threejs, thats unlikely to happen.

But back to your original model. The texture is simply getting stretched, since the UVs are all over the place. Try re UVing and reprojecting. Also try to reduce the size of your texure, 22MB is kinda overkill. If i open the UVs up in Blender, the amount of UV space located for those larger window elements is next to nothing, its definately a UV fault here.

@Akroob Appreciate you taking the time to explain. Yeah, I noticed afterwards textures file are huge :slight_smile: I know it doesn’t make sense but it was just one of the things I tried (hi-res image texture) to solve stretching issue.

@mjurczyk wow the links you provided are very usefull. It’s exactly what I was looking for. Thank you