three.js - 如何禁用three.js以以2的幂调整图像大小？

Question

如果不是 2 的幂，three.js 会自动调整纹理图像的大小。
在我的情况下，我使用自定义 Canvas 作为纹理，这不是二的幂。同时调整大小
使纹理无法正确显示。有什么方法可以禁用three.js中图像的大小调整

Answer 1

three.js 实际上正在尝试 帮个忙 .

由于它是开源的，我们可以阅读 WebGLRenderer.js 的源代码并看到 setTexture方法调用(非公开可见的)方法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;
}

如果您对与钳制不同的纹理坐标使用环绕，或者如果您使用的过滤不是最近的也不是线性的，则纹理会被缩放。

如果您对此代码感到惊讶 我强烈建议你看看 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 是开源的，您可以编辑本地副本并删除“违规”检查。

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