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

【问题标题】：In THREE.js, how can I make textures resolution-independent and render without blurriness?在 THREE.js 中，如何使纹理独立于分辨率并呈现不模糊？
【发布时间】：2019-08-21 12:15:17
【问题描述】：

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

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

【问题讨论】：

可以分享截图吗？
当然！ Here 是我使用一个小的 .png 文件时得到的。截图中使用的确切是this。

标签： three.js

【解决方案1】：

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

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

【讨论】：