为OBJ模型添加纹理失败，遇THREE.WebGLRenderer非2次幂图片报错求助

嘿，我懂你遇到的这个头疼问题！那个THREE.WebGLRenderer: image is not power of two警告本质上是因为Three.js默认对非2的幂次（比如284x177这种不是2^n的尺寸）的纹理会自动缩放，目的是兼容一些旧的WebGL硬件，但这往往会导致纹理变形或者不是你想要的显示效果。下面给你两个靠谱的解决方案：

方案1：配置纹理允许非2的幂次显示 #

如果不想修改图片尺寸，可以直接调整纹理的参数，让Three.js不再自动缩放它。只需要在纹理加载完成后设置几个关键属性就行：

var textureLoader = new THREE.TextureLoader();
var map = textureLoader.load('img/3.jpg', function(texture) {
    // 禁止纹理重复（非2幂次纹理不支持重复平铺）
    texture.wrapS = THREE.ClampToEdgeWrapping;
    texture.wrapT = THREE.ClampToEdgeWrapping;
    // 使用线性过滤替代默认的mipmap过滤（mipmap只支持2幂次纹理）
    texture.minFilter = THREE.LinearFilter;
    // 告诉Three.js更新纹理设置
    texture.needsUpdate = true;
});

var material = new THREE.MeshPhysicalMaterial({map: map});

var loader = new THREE.OBJLoader(loadingManager);
loader.load('models/cool.obj', function(object) {
    object.traverse(function(child) {
        // 确保只给网格对象应用材质
        if (child.isMesh) {
            child.material = material;
        }
    });
    // 别忘了把模型添加到场景里
    scene.add(object);
});

这里要注意：非2幂次的纹理不支持重复平铺（也就是RepeatWrapping模式），如果你的需求是要纹理平铺，那这个方案就不适用，得用下面的方案2。

方案2：将图片修改为2的幂次尺寸 #

这是最稳妥的方案，完全符合WebGL的传统要求，也不会有任何警告。你可以用Photoshop、GIMP或者在线图片编辑工具，把284x177的图片调整为最近的2的幂次尺寸，比如256x256或者512x256（如果不想让图片拉伸太厉害，也可以在调整尺寸时添加透明边距保持原图比例）。修改完图片后，直接用原来的代码就能正常显示纹理，不需要额外配置。

两种方案按需选就行，如果追求兼容所有设备或者需要纹理平铺，选方案2；如果不想改图且不需要平铺，选方案1就搞定啦！

内容的提问来源于stack exchange，提问作者Boby