Три материала карты JS вызывают предупреждение WebGL

Я пытаюсь определить материал для сеток, которые я загрузил из OBJLoader через следующую функцию-оболочку:

function applyTexture(src){
    var texture = new THREE.Texture();
    var loader = new THREE.ImageLoader();
    loader.addEventListener( 'load', function ( event ) {
        texture.image = event.content;
        texture.needsUpdate = true;

        // find the meshes from the loaded OBJ and apply the texture to it.
        object.traverse( function ( child ) {
            if ( child instanceof THREE.Mesh ) {
                if(child.name.indexOf("Lens") < 0){
                    child.dynamic = true;

                   child.material = new THREE.MeshLambertMaterial( { color: 0xdddddd, shading: THREE.FlatShading, map : texture } );
                   // also tried:
                   //child.material = new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x666666, emissive: 0x000000, ambient: 0x000000, shininess: 10, shading: THREE.SmoothShading, map : texture} );
                   // and:
                   //child.material = new THREE.MeshBasicMaterial({map : texture});
                   child.material.map = texture; // won't throw the WebGL Warning, but won't show the texture either;
               } else {
                   // works just fine.
                   child.material = new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x666666, emissive: 0x000011, ambient: 0x000000, shininess: 10, shading: THREE.SmoothShading, opacity: 0.6, transparent: true } );
               }
            }
        });
    });
    loader.load( src );
}

когда текстура загрузилась и пришло время применить материал к сетке, я начинаю получать следующее предупреждение на консоли:

.WebGLRenderingContext: GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 0

и сама сетка исчезает.

что я здесь делаю не так?

обновление

как @WestLangley указал на комментарии: никогда не пытайтесь применить текстура / материалы после того, как вещи были визуализированы. Создайте материалы перед рендерингом объекта на сцену, а затем измените их с помощью:

obj.material.map = texture
6
texture-mapping three.js

2 ответов

С WebGLRenderer, вы не можете переключиться с материала без текстуры на материал с текстурой после того, как сетка была отображена один раз. Это связано с тем, что без исходной текстуры геометрия не будет иметь необходимых запеченных УФ-буферов WebGL.

обход должен начинаться с материала, имеющего простую белую текстуру.

обновление: альтернативно, вы can начните с текстурного материала, а затем установите следующие флаги, когда текстура добавлено:

material.needsUpdate = true;
geometry.buffersNeedUpdate = true;
geometry.uvsNeedUpdate = true;

три.js r.58

12

Я также получил эту ошибку при загрузке сцены из блендера. Для меня проблема была исправлена при разворачивании uv для каждой сетки, на которой я хочу иметь текстуру.

2