如果不是 2 的幂,three.js 会自动调整纹理图像的大小。
在我的情况下,我使用自定义 Canvas 作为纹理,这不是二的幂。同时调整大小
使纹理无法正确显示。有什么方法可以禁用three.js中图像的大小调整
最佳答案
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;
}
如果您对与钳制不同的纹理坐标使用环绕,或者如果您使用的过滤不是最近的也不是线性的,则纹理会被缩放。
如果您对此代码感到惊讶 我强烈建议你看看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 是开源的,您可以编辑本地副本并删除“违规”检查。
然而,一种更好、更简单、更易于维护的方法是简单地缩放 UV 映射。毕竟它只是为了这个用例。
关于three.js - 如何禁用three.js以以2的幂调整图像大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36059642/