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张，则需要使用计数或其他内容而不是标记。

如何在加载three.js纹理时除去INVALID_VALUE警告？

1 个答案: