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 中更改图像质量？

- P. Frank

Answer 1

在2020年

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

- El D

---

我有一个非常类似的问题，这些建议对我没有帮助 :/ 如果您有一分钟，可以看一下 https://stackoverflow.com/questions/71117578/threejs-how-to-improve-texture-image-resolution - Rylan Schaeffer

Answer 2

你想要：

texture.generateMipmaps = false;

- gaitat

---

不起作用，但现在出现了一个亮眼的覆盖层。如何禁用它？ - P. Frank

我使用一个动画函数。 - P. Frank

Answer 3

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

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

- xiaoming

---

这是不正确且有可能误导的默认设置是 THREE.LinearMipMapLinearFilter。 - ScieCode

你的三个版本是什么？ - xiaoming

dev或latest（r104），默认为THREE.LinearMipMapLinearFilter。参考 - ScieCode