如何禁用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 中的自动图像调整大小(使用引导程序)