CODEWITHSUNDEEP
three.jsreact-three-fiber
RodrigoKulb
RodrigoKulb

Reputation: 49

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

Upvotes: 0

Views: 2446

Answers (2)

charleslcso
charleslcso

Reputation: 182

I am not as lucky... the image (512x512) I applied to Texture will be shrinked so much that it is useless. There are something like 12x12 images repeated across the UV plane.

I'm using texture.repeat.set(1,1).

enter image description here

Using a much larger image will give the same total number of images in the grid, with the image more pixelated.

enter image description here

I don't know how to adjust the image so that exactly 1 image will fit into the geometry.

It seems counter-intuitive, but I can use:

texture.repeat.set(0.1,0.1)

to enlarge the image.

enter image description here

but this is not suitable as the image will be applied dynamically.

This has been dragging on for 2 months now, and I still can't figure out a solution.

Do you have any idea about which threejs parameter to set? Below is my existing code:

let dirtImg = "/logo192.png";
const texture = new THREE.TextureLoader().load(dirtImg);
texture.magFilter = THREE.NearestFilter;     // no effect
texture.minFilter = THREE.LinearMipMapLinearFilter;    // no effect
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;  // has effect
texture.flipY  = false;          // has effect
texture.repeat.set(1,1);         // has effect
const material = new THREE.MeshPhongMaterial( {map: texture} );

Upvotes: 0

RodrigoKulb
RodrigoKulb

Reputation: 49

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;

Upvotes: 1

Related Questions