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

Posted

技术标签:

【中文标题】如何禁用three.js以以2的幂调整图像大小?【英文标题】:How to disable three.js to resize images in power of two? 【发布时间】:2016-07-03 17:56:22 【问题描述】:

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

【问题讨论】:

【参考方案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 映射。毕竟它只是为了这个用例。

【讨论】:

很好的回答。 :)

以上是关于如何禁用three.js以以2的幂调整图像大小?的主要内容,如果未能解决你的问题,请参考以下文章

使用 css 防止或禁用 div 中的自动图像调整大小(使用引导程序)

Three.js 画布纹理幂为 2 但被裁剪

在contenteditable div中禁用图像的大小调整

如何使 Three.js FOV 响应高度和宽度?

matlab如何让调整保存图像的大小

模板 - 数学 - 数论 - 线性筛