三.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

设置纹理 minFilter 属性。 THREE.js 默认为无。

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

Answer 3

2020 年

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