Mesh map image always with low resolution

Questions
,
1

Hello everyone,
I’ve been trying for the last couple of days to figure out how to increase the (I guess) resolution of an image I’m using to tile a mesh, using repeat, offset etc. Here’s the simple code below:

const textureLoader = new THREE.TextureLoader();
const image = textureLoader.load(tileSprite, ( texture ) => {
  texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
  texture.offset.set( offset.x, offset.y );
  texture.repeat.set( repeat, repeat );
});
mesh.material.map = image
mesh.material.needsUpdate = true

What happens is that as I use repeat, the rendering just becomes very low resolution, I’m assuming because it’s resizing the image to fit my needs. I’ve tried to create smaller images (less pixels) and not use repeat but apparently it’ doesn’t matter what size of image I use, it will always be rendered the exact same size.

What am I doing wrong? How can I have the best resolution possible applying an image to a mesh?

Thank you very much!

2

I think you have to use the high resolution texture. For example, if you use 2k or 4k texture in Blender, and export it into glb, you will notice that it look good in threejs scene

3

Thanks Keron, I’ll try that!

1 Like