0
262
ViewsThree.js image quality blured
I have made a cube with textures with three.js. When I add a texture, the quality is not good. It's light blurry and I don't know how fix it.
Example:
Original image
Image in Three.js (blurry)
You can see better bellow: (The blue and gold in the head are not the same)
Original Image
Image in Three.js (blurry)
I have tried a lot of solutions:
texture.anisotropy = 16;
-
renderer.setPixelRatio(window.devicePixelRatio ? window.devicePixelRatio : 1)
-
renderer = new THREE.WebGLRenderer( {
canvas: theCanvas,
antialias: true,
preserveDrawingBuffer: true,
alpha:true
} );
I have tried to change the light too but it was never working. Is it possible to change the image quality directly in three.js?
·
Santiago Trujillo
3 answers
Answer question0
You want:
texture.generateMipmaps = false;
·
Santiago Trujillo
Report
0
in 2020
var texture = new THREE.TextureLoader().load();
texture.generateMipmaps = false;
texture.minFilter = THREE.LinearFilter;
texture.needsUpdate = true;
·
Santiago Trujillo
Report
0
Set the texture minFilter property. THREE.js default is none.
var texture = new THREE.TextureLoader().load();
texture.minFilter = THREE.LinearFilter;
·
Santiago Trujillo
Report
Answer question