如何禁用three.js以2的幂调整图像大小? [英] How to disable three.js to resize images in power of two?

问题描述

three.js 会自动调整纹理图像的大小，如果它不是 2 的幂.在我的情况下，我使用自定义画布作为纹理，这不是二的幂.同时调整大小使纹理无法正确显示.有没有办法禁用three.js中图像的大小调整

three.js automatically resizes the texture image, if it is not power of two. In my case am using a custom canvas as texture , which is not power of two.while resizing makes the texture not appearing properly.Is there any way to disable the resizing of the images in three.js

推荐答案

three.js 实际上是在尝试帮你一个忙.

由于它是开源的，我们可以阅读WebGLRenderer.js 并看到 setTexture 方法调用(非公开可见)方法 uploadTexture.

Since it is open source we can read the source code of WebGLRenderer.js and see that the setTexture method calls the (non public visible) method uploadTexture.

后者有这个检查:

if ( textureNeedsPowerOfTwo( texture ) && isPowerOfTwo( image ) === false ){

    image = makePowerOfTwo( image );
}

这本身就很好解释.

您现在可能想知道 textureNeedsPowerOfTwo 实际检查了什么.让我们看看.

You may wonder now what textureNeedsPowerOfTwo actually checks. Let's see.

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 不同的纹理，或者如果您使用的过滤不是最近 也不是 线性 纹理被缩放.

If you use wrapping for the texture coordinated different from clamp or if you use a filtering that is not nearest nor linear the texture gets scaled.

如果您对此代码感到惊讶我强烈建议您查看关于使用纹理的 MDN 页面.

If you are surprised by this code I strongly suggest you to take a look at the MDN page on using textures.

引用

问题:这些纹理 [Non Power Of Two 纹理] 不能与 mipmapping 一起使用，并且它们不能重复"(平铺或包裹).

The catch: these textures [Non Power Of Two textures] cannot be used with mipmapping and they must not "repeat" (tile or wrap).

[...]

如果不执行上述配置，WebGL 要求所有 NPOT [Non Power Of Two] 纹理样本失败，返回纯黑色:rgba(0,0,0,1).

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 纹理会给您带来旧的纯黑色.

So using a NPOT texture with incorrect texture parameters would give you the good old solid black.

由于 three.js 是开源的，您可以编辑本地副本并删除违规"检查.

Since three.js is open source, you can edit your local copy and remove the "offending" check.

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

However a better, simpler, and more maintainable approach is to simply scale the UV mapping. After all it is there just for this use case.

这篇关于如何禁用three.js以2的幂调整图像大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！