Question

我在场景中稍远一些的物体上使用纹理。纹理变得非常锯齿状，并在相机移动时产生令人不安的效果。我试过改变各向异性，我试过改变min和mag滤波器，但似乎没有任何帮助。

代码我用来加载纹理（所有纹理都是1024px×1024px）：

var texture = new THREE.Texture();
var texloader = new THREE.ImageLoader(manager);
texloader.load('static/3d/' + name + '.jpg', function (image) {
    texture.image = image;
    texture.needsUpdate = true;
    texture.anisotropy = 1;
    texture.minFilter = THREE.LinearFilter;
    texture.magFilter = THREE.LinearMipmapLinearFilter;
});

您可以在此处看到它：http://www.90595.websys.sysedata.no/

Answer 1

gaitat错了，你确实想要mipmap。您的代码的问题是它们不会生成。使用控制台，我发现虽然＆＃34; generateMipmaps＆＃34;在纹理中设置为＆＃34; true＆＃34;，不会生成mipmap，如此屏幕截图所示：http://imgur.com/hAUEaur。

我看了你的纹理，我相信由于你的纹理不是2的幂（例如128x128,256x256,512x512），所以没有生成mipmap。尝试制作宽度和高度为2的幂的纹理，我认为将生成mipmap并且它们不会再看起来像锯齿状。

Answer 2

随着物体远离相机移动，webgl使用自动生成的纹理称为mipmap。这些分辨率较低。如果你不喜欢他们，请通过以下方式禁用它们：

texture.generateMipmaps = false;

Answer 3

好。所以我想我尝试了所有不同的mipmap过滤器，但显然没有。所以这就是最终做到的伎俩：

texture.minFilter = THREE.NearestMipMapNearestFilter;
texture.magFilter = THREE.LinearMipMapLinearFilter;

根本不需要anisotropy。

three.js - 远离相机的物体会出现锯齿状纹理

3 个答案: