我怎样才能摆脱INVALID_VALUE警告时加载一个three.js纹理

Question

使用Three.Js r66和如下设置:

var texture = THREE.ImageUtils.loadTexture('/data/radar.png');
texture.wrapS = THREE.RepeatWrapping;
 var radar = new THREE.Mesh(
    sphere,
    new THREE.MeshBasicMaterial({
      map: texture,
      transparent: true,
    }));

我在控制台上得到以下警告:

WebGL: INVALID_VALUE: texImage2D: invalid image dev_three.js:26190
[.WebGLRenderingContext]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete' 

我很确定这是因为对象在纹理被加载之前被渲染，因此WebGL试图访问一个空纹理:three.js行26190.

_gl.texImage2D( _gl.TEXTURE_2D, 0, glFormat, glFormat, glType, texture.image );

上面引用的代码工作-一旦纹理被加载，它显示得很好。我想去掉这些警告，有什么想法吗?其他材料(例如phong)似乎可以更好地处理异步纹理加载。它们看起来是黑色的，直到纹理出现。值得注意的是，它们不会向控制台发送警告。

这个演示(http://jeromeetienne.github.io/tunnelgl/)显示了同样的问题。

Answer 1

等待纹理加载

var safeToRender = true;
var texture = THREE.ImageUtils.loadTexture('/data/radar.png', 
                                           undefined, 
                                           textureHasLoaded);
function textureHasLoaded() {
  safeToRender = true;
}

然后在safeToRender为真之前不要开始渲染。当然，如果你要加载多于1张图片，你需要使用计数或其他东西来代替标志。