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

Question

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

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

Answer 1

如本例所示,您需要设置纹理的过滤.

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