3

まず第一に、この素​​晴らしい仕事に感謝します。three.js を使った作業はとても楽しいものです。

繰り返し発生する問題、 .WebGLRenderingContext: GL エラー :GL_INVALID_OPERATION : glDrawElements: 属性 2 の範囲外の頂点にアクセスしようとすることについての回答を見つけようとしました

私は webgl で Web サイトを作成しています。three.js についてすべて理解するのに数週間を費やしていますが、この問題を修正できません。キャンバスをマップ、バンプマップ、およびスペックマップにロードしようとするたびに、Chrome と firefox (最新) でこのメッセージが表示されます。すべてのメッシュは obj ファイルからロードされますが、obj ファイルなどからより多くのパラメータをロードできるように OBJMTLLoader.js を書き直しました。ここで、画像をロードするために使用されるコード。

THREE.MTLLoader.loadTexture = 関数 (url、マッピング、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;

}; この機能を無効にすると、警告が表示されなくなるため、これからだと確信しています。

データの読み込み中にメッシュに空の画像のテクスチャがあるためですか? 画像のサイズに制限はありますか?

今のところすべて問題なく動作していますが、コンソールにこれらのメッセージが表示されるのは奇妙に感じます。

ありがとう

4

1 に答える 1

1

このエラーは、Three.js バッファーが古くなっているために発生します。いくつかのテクスチャ (map、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;

以上です！

それが助けになることを願っています。

よろしく。

セリス

于 2013-11-30T18:18:49.287 に答える