three.js - 在 THREE.js 中，如何使纹理独立于分辨率并呈现不模糊？

Question

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

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

Answer 1

如本例所示，您需要设置纹理的过滤。

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