Tres materiales de mapas JS provocan una advertencia de WebGL
Estoy tratando de definir un material para las mallas que cargué desde OBJLoader a través de la siguiente función de envoltura:
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 );
}
Cuando la textura se ha cargado y es hora de aplicar el material a la malla, comienzo a recibir la siguiente advertencia en la consola:
.WebGLRenderingContext: GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 0
y la malla misma desaparece.
¿Qué estoy haciendo mal aquí?
ACTUALIZARComo @WestLangley señaló en los comentarios: Nunca intente aplicar texturas / materiales después de que se hayan renderizado las cosas. Cree los materiales antes de representar el objeto en la escena y luego cámbielos usando:
obj.material.map = texture