如何禁用 three.js 以二的幂调整图像大小?

How to disable three.js to resize images in power of two?

three.js 自动调整纹理图像的大小,如果它不是二的幂。 在我的例子中,我使用自定义 canvas 作为纹理,这不是 two.while 调整大小的力量 使纹理不出现 properly.Is 有任何方法可以禁用 three.js

中图像的大小调整

three.js其实是想帮个忙.

因为它是开源的我们可以阅读WebGLRenderer.js的源代码,看到setTexture方法调用了(非public可见)方法uploadTexture

后者有这个检查:

if ( textureNeedsPowerOfTwo( texture ) && isPowerOfTwo( image ) === false ){

    image = makePowerOfTwo( image );
}

这本身就很好解释了。

您现在可能想知道 textureNeedsPowerOfTwo 实际检查的是什么。让我们看看。

function textureNeedsPowerOfTwo( texture ) {

        if ( texture.wrapS !== THREE.ClampToEdgeWrapping || texture.wrapT !== THREE.ClampToEdgeWrapping ) return true;
        if ( texture.minFilter !== THREE.NearestFilter && texture.minFilter !== THREE.LinearFilter ) return true;

        return false;
}

如果您使用 wrapping 来协调与 clamp 不同的纹理,或者如果您使用非 的过滤nearestlinear 纹理被缩放。

如果您对这段代码感到惊讶我强烈建议您看看MDN page on using textures

引用

The catch: these textures [Non Power Of Two textures] cannot be used with mipmapping and they must not "repeat" (tile or wrap).

[...]

Without performing the above configuration, WebGL requires all samples of NPOT [Non Power Of Two] textures to fail by returning solid black: rgba(0,0,0,1).

因此使用带有 不正确纹理参数 的 NPOT 纹理会给你很好的旧 纯黑色


由于 three.js 是开源的,您可以编辑本地副本并删除 "offending" 检查。

然而,更好、更简单、更易于维护的方法是简单地缩放 UV 映射。毕竟它只是为了这个用例。