three.js - WebGLRenderingContext 加载纹理贴图时出错

Question

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

我试图找到一个反复出现的问题的答案，.WebGLRenderingContext: GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 2

我正在用 webgl 制作一个网站，我花了几个星期的时间了解所有关于 three.js 的内容，但我无法解决这个问题。每次我尝试将 Canvas 加载到 map 、bumpmap 和 specmap 中时，我都会在 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;

};我很确定这是从这里开始的，因为当我禁用此功能时，不再有警告。

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

目前一切正常，但我觉得控制台中出现这些消息很奇怪。

谢谢

Answer 1

这个错误是因为 Three.js 缓冲区已经过时了。当您将一些纹理(贴图、凹凸贴图...)添加到网格时，您必须像这样重组缓冲区:

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;

这就是所有人!

希望对你有帮助。

问候。

赛瑞斯