Three.js图像质量模糊

Question

我制作了一个带有three.js纹理的立方体。当我添加纹理时，质量不好。它的光线模糊，我不知道如何解决它。

示例：

原始图片

Three.js中的图像（模糊）

你可以看到更好的吼叫:(头部的蓝色和金色不一样）

原始图片

Three.js中的图像（模糊）

我尝试了很多解决方案：

texture.anisotropy =  16;

-

renderer.setPixelRatio(window.devicePixelRatio ? window.devicePixelRatio : 1)

-

renderer = new THREE.WebGLRenderer( { 
   canvas: theCanvas,
   antialias: true,
   preserveDrawingBuffer: true,
   alpha:true
} );

我也试图改变灯光，但它从未工作过。是否可以直接在three.js？

中更改图像质量

Answer 1

你想：

texture.generateMipmaps = false;

Answer 2

在2020年

    var texture = new THREE.TextureLoader().load();
    texture.generateMipmaps = false;
    texture.minFilter = THREE.LinearFilter;
    texture.needsUpdate = true;

Answer 3

设置纹理minFilter属性。 THREE.js的默认值为none。

    var texture = new THREE.TextureLoader().load();
    texture.minFilter = THREE.LinearFilter;