如何禁用 three.js 以二的幂调整图像大小?
How to disable three.js to resize images in power of two?
three.js 自动调整纹理图像的大小,如果它不是二的幂。
在我的例子中,我使用自定义 canvas 作为纹理,这不是 two.while 调整大小的力量
使纹理不出现 properly.Is 有任何方法可以禁用 three.js
中图像的大小调整
three.js其实是想帮个忙.
因为它是开源的我们可以阅读WebGLRenderer.js的源代码,看到setTexture
方法调用了(非public可见)方法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;
}
如果您使用 wrapping 来协调与 clamp 不同的纹理,或者如果您使用非 的过滤nearest 或 linear 纹理被缩放。
如果您对这段代码感到惊讶我强烈建议您看看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 是开源的,您可以编辑本地副本并删除 "offending" 检查。
然而,更好、更简单、更易于维护的方法是简单地缩放 UV 映射。毕竟它只是为了这个用例。
three.js 自动调整纹理图像的大小,如果它不是二的幂。 在我的例子中,我使用自定义 canvas 作为纹理,这不是 two.while 调整大小的力量 使纹理不出现 properly.Is 有任何方法可以禁用 three.js
中图像的大小调整three.js其实是想帮个忙.
因为它是开源的我们可以阅读WebGLRenderer.js的源代码,看到setTexture
方法调用了(非public可见)方法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;
}
如果您使用 wrapping 来协调与 clamp 不同的纹理,或者如果您使用非 的过滤nearest 或 linear 纹理被缩放。
如果您对这段代码感到惊讶我强烈建议您看看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 是开源的,您可以编辑本地副本并删除 "offending" 检查。
然而,更好、更简单、更易于维护的方法是简单地缩放 UV 映射。毕竟它只是为了这个用例。