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

Question

three.js 自动调整纹理图像的大小，如果它不是 2 的幂。 在我的情况下，我使用自定义画布作为纹理，这不是二的幂。同时调整大小 使纹理无法正常显示。有什么方法可以禁用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;
}

如果您对与 clamp 协调的纹理使用 wrapping，或者如果您使用的过滤器不是 最近 也不是 线性 纹理被缩放。

如果您对此代码感到惊讶强烈建议您查看MDN page on using textures。

引用

问题：这些纹理 [Non Power Of Two Textures] 不能与 mipmapping 一起使用，并且它们不能“重复”（平铺或包裹）。

[...]

如果不执行上述配置，WebGL 要求所有 NPOT [Non Power Of Two] 纹理样本失败并返回纯黑色：rgba(0,0,0,1)。

因此，使用具有不正确的纹理参数的 NPOT 纹理会给您带来良好的旧 纯黑色。

---

由于 three.js 是开源的，您可以编辑本地副本并删除“违规”检查。

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