三个js，块纹理模糊

Question

我正在尝试使用 three.js 库制作 3D 方块。
我已经做到了。现在我不想在上面添加纹理。我这样做了，它正在工作：

var textureHerbe = [
     new THREE.MeshBasicMaterial({map:THREE.ImageUtils.loadTexture('img/texture/herbe/border.gif')}),
     new THREE.MeshBasicMaterial({map:THREE.ImageUtils.loadTexture('img/texture/herbe/border.gif')}),
     new THREE.MeshBasicMaterial({map:THREE.ImageUtils.loadTexture('img/texture/herbe/top.gif')}),
     new THREE.MeshBasicMaterial({map:THREE.ImageUtils.loadTexture('img/texture/herbe/bottom.gif')}),
     new THREE.MeshBasicMaterial({map:THREE.ImageUtils.loadTexture('img/texture/herbe/border.gif')}),
     new THREE.MeshBasicMaterial({map:THREE.ImageUtils.loadTexture('img/texture/herbe/border.gif')})
];

这就是结果：

但是看看这个，它是模糊的！
所以我看了这个this link。而且我不知道如何将我的代码与他的解决方案的代码混合使用：/
你知道我该怎么做吗？谢谢，祝你有美好的一天。

Answer 1

首先，您多次加载相同的纹理。因此，将其分配给一个变量，然后使纹理与分辨率无关，并在不模糊的情况下进行渲染。

var border_tex = new THREE.ImageUtils.loadTexture('img/texture/herbe/border.gif');
border_tex.magFilter = THREE.NearestFilter;
border_tex.minFilter = THREE.LinearMipMapLinearFilter;

var top_tex = new THREE.ImageUtils.loadTexture('img/texture/herbe/top.gif');
top_tex.magFilter = THREE.NearestFilter;
top_tex.minFilter = THREE.LinearMipMapLinearFilter;

var bottom_tex = new THREE.ImageUtils.loadTexture('img/texture/herbe/bottom.gif');
bottom_tex.magFilter = THREE.NearestFilter;
bottom_tex.minFilter = THREE.LinearMipMapLinearFilter;

var textureHerbe = [
    new THREE.MeshBasicMaterial( { map: border_tex } ),
    new THREE.MeshBasicMaterial( { map: border_tex } ),
    new THREE.MeshBasicMaterial( { map: top_tex } ),
    new THREE.MeshBasicMaterial( { map: bottom_tex } ),
    new THREE.MeshBasicMaterial( { map: border_tex } ),
    new THREE.MeshBasicMaterial( { map: border_tex } ),
];

三个js，块纹理模糊

Three js, block textures are blured

javascript

three.js

web