Three.js 从远处看，ThreeJS纹理是像素化的

我在玩webGL和ThreeJS，然后我遇到了以下问题：

当从远处看时，具有大型图像的纹理会被像素化

检查示例：

代码如下：

var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（40，window.innerWidth/window.innerHeight，107000）；
var灯=新的三点灯（0xffffff）；
光。位置。设置（0，150，100）；
场景。添加（灯光）；
var light2=新的三点环境光（0x4444）；
场景。添加（light2）；
var renderer=new THREE.WebGLRenderer({
反别名：对
});
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var几何=新的三个平面几何（500、500、10、10）；
//我在我的项目中使用不同的纹理
var texture=new THREE.ImageUtils.loadTexture（测试图像）；
var textureBack=new THREE.ImageUtils.loadTexture（测试图像）；
textureBack.各向异性=renderer.getMax各向异性（）；
texture.各向异性=renderer.getMax各向异性（）；
//过滤器
texture.magFilter=3.NearestFilter；
texture.minFilter=THREE.linearMipmAlpinerFilter；
textureBack.magFilter=3.NearestFilter；
textureBack.minFilter=THREE.LinearMipmAlpinerFilter；
var材料=[
新的三点网格材料({
透明：是的，
贴图：纹理，
正面：三面
}),
新的三点网格材料({
透明：是的，
贴图：纹理回退，
侧面：三。背面
})];
对于（变量i=0，len=geometry.faces.length；i

如果纹理图像中包含文本，则文本将变得非常像素化，质量较差

---

如何修复此问题？

为了避免像素化，您需要使用mips，但WebGL无法为非二次幂纹理生成mips。你的纹理是800x533，这两个都不是2的幂

有几个选择

1） 将图片脱机缩放为2的幂，如512x512或1024x512

2） 在制作纹理之前，在运行时缩放图片

自己加载图像，加载后制作一张2次幂的画布。调用drawImage（img，0，0，canvas.width，canvas.height）将图像缩放到画布中。然后将画布加载到纹理中

您可能还想将mag筛选从

NearestFilter

更改为

LinearFilter

注：（1）是更好的选择。（2） 在用户的机器上花费时间，使用更多内存，并且您无法保证缩放的质量