Search code examples
three.jsreact-three-fiber

How to use a texture in the size of the original image in threejs / react-three-fiber

I have a difficulty in a project, I need to create a box to optimize processing, I would like the texture to be 16 px by 16 px. When I apply it to the box, regardless of the size of the box, it gets blur like the image below. Is there a possibility to set the pixels of the texture to look exactly like the image? Without using a large image?

Resulting using a 16 x 16 pixel image. enter image description here

Resulting using a 500 x 16 pixel image. enter image description here

Solution

  • I managed to solve it by adding a filter on the texture: Example:

    import dirtImg from './images/dirt.jpg';
export const dirt = new TextureLoader().load(dirtImg);
dirt.magFilter = NearestFilter;
dirt.minFilter = LinearMipMapLinearFilter;