使用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/)表现出同样的问题。
答案 0 :(得分:2)
等待纹理加载
var safeToRender = true;
var texture = THREE.ImageUtils.loadTexture('/data/radar.png',
undefined,
textureHasLoaded);
function textureHasLoaded() {
safeToRender = true;
}
然后在safeToRender
为真之前不要开始渲染。
当然,如果您加载的图像超过1张,则需要使用计数或其他内容而不是标记。