Prevent texture from stretching

Questions
1

Ive tried most of the solutions I have found but it doesnt seem to work. Right now this is what Im using:

var canvasTexture = new THREE.CanvasTexture(cnvs);
canvasTexture.wrapS = THREE.RepeatWrapping;
canvasTexture.wrapT = THREE.RepeatWrapping;
canvasTexture.flipY = false;
canvasTexture.anisotropy = 16;

And this is the result, it still somehow stretched making it a bit blurry.

s1
s11348×637 54.9 KB

also here is the canvas where I use fabric js

s2
s21350×537 130 KB

What other ways can I use to prevent it from stretching and to sharpen the rendering?

2

Try to adjust the Repetition value:

canvasTexture.repeat.set(x, y);
2 Likes
3

Thank you for the response! I dont think repeating it is applicable on what im trying to do. Do you think it has to do with the aspect ratio?

4

But you are putting a square texture to a rectangular shape, of course its going to stretch. The blurryness also comes from the low resolution of the texture. If you want to fix this in code, you are able to edit the UV island coordinates if you log your model. But any sane person would fix this in a 3D model program, like Blender.

1 Like
5

It doesn’t sound like it, but it does. If you set repeat to ( .5 , 1. ) it will stretch out horizontally.
There is also .offset(), and .rotation

With the right combination of .repeat,…offset, and .rotation you can position/stretch a texture just about anywhere on a model.

https://threejs.org/docs/#api/en/textures/Texture.repeat