Question

three.js会自动调整纹理图像的大小，如果它不是2的幂。在我的情况下，我使用自定义画布作为纹理，这不是两个的力量。同时调整大小使纹理看起来不正确。有没有办法禁用三个画面的大小调整.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 不同的纹理，或者如果您使用的滤波不是最近，也不是线性纹理缩放。

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

引用

捕获：这些纹理[两种纹理的非幂]不能与mipmapping一起使用，它们不能重复＆＃34;重复＆＃34; （瓷砖或包裹）。

[...]

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

因此，使用带有错误纹理参数的NPOT纹理会为您提供良好的旧纯黑色。

由于 three.js 是开源的，因此您可以编辑本地副本并删除＆＃34;违规＆＃34;校验。

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

如何禁用three.js来调整两个幂的图像？

1 个答案: