在THREE.js中，如何使纹理与分辨率无关并且渲染时没有模糊？

Question

我正在尝试将纹理应用于THREE.js中的网格，但为了获得可接受的清晰度，我不得不使用比理想大得多的PNG，大小为几百平方的像素。例如，如果我使用简单的东西，例如8×8格子图案，可能的最小分辨率看起来像一堆点。

用于纹理的代码是THREE.ImageUtils.loadTexture("sprites/land1.png");

Answer 1

如this example所示，您需要设置纹理的过滤。

var texture = THREE.ImageUtils.loadTexture( 'texture.png' );
texture.magFilter = THREE.NearestFilter;
texture.minFilter = THREE.LinearMipMapLinearFilter;