WebGLRenderingContext 错误加载纹理贴图答案

【问题标题】：WebGLRenderingContext ERROR loading texture mapsWebGLRenderingContext 错误加载纹理贴图
【发布时间】：2012-12-08 22:39:04
【问题描述】：

首先，感谢您所做的出色工作，我在使用 three.js 时获得了很多乐趣。

我试图找到关于一个经常性问题的答案，.WebGLRenderingContext: GL ERROR :GL_INVALID_OPERATION : glDrawElements: 尝试访问属性 2 中超出范围的顶点

我在 webgl 中创建一个网站，我花了几周时间了解有关 three.js 的所有内容，但我无法解决这个问题。每次我尝试将画布加载到地图、凹凸贴图和规格图中时，我都会在 Chrome 和 firefox（最新）上收到此消息。我所有的网格都是从 obj 文件加载的，顺便说一下，我重写了 OBJMTLLoader.js 以便能够从 obj 文件加载更多参数等等。这里是用于加载图像的代码。

THREE.MTLLoader.loadTexture = function (url, mapping, onLoad, onError) {

var isCompressed = url.toLowerCase().endsWith( ".dds" );
var texture = null;

if ( isCompressed ) {

    texture = THREE.ImageUtils.loadCompressedTexture( url, mapping, onLoad, onError );

} else {

    var image = new Image();

    texture = new THREE.Texture( image, mapping );

        var loader = new THREE.ImageLoader();

        loader.addEventListener( 'load', function ( event ) {

            texture.image = THREE.MTLLoader.ensurePowerOfTwo_( event.content );
            texture.needsUpdate = true;
            if ( onLoad ) 
                onLoad( texture );

        } );

        loader.addEventListener( 'error', function ( event ) {

            if ( onError ) onError( event.message );

        } );

        loader.crossOrigin = this.crossOrigin;
        loader.load( url, image );

}

return texture;

}; 我很确定是这个，因为当我禁用这个功能时，没有更多的警告。

是因为网格在加载数据时具有带有空图像的纹理吗？图片尺寸有限制吗？

目前一切正常，但在控制台中显示这些消息我感觉很奇怪。

谢谢

【问题讨论】：

也许如果你能提供更多代码（jsfiddle？）我们可以模拟这个警告，看看发生了什么......？

标签： three.js

【解决方案1】：

出现此错误是因为 Three.js 缓冲区已过时。当您将一些纹理（地图、bumpMap ...）添加到网格时，您必须像这样重新组合缓冲区：

ob is  THREE.Mesh, mt is a Material, tex is a texture.

tex.needsUpdate = true;
mt.map = tex;
ob.material = mt;
ob.geometry.buffersNeedUpdate = true;
ob.geometry.uvsNeedUpdate = true;
mt.needsUpdate = true;

这就是所有人！

希望对你有所帮助。

问候。

萨里斯

【讨论】：