Three JS Map materials lead to WebGL Warning

Question

I am trying to define material for cells loaded from OBJLoader using the following wrapper function:

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 ); } 

When the texture loads and it's time to apply the material to the grid, I begin to receive the following warning on the console:

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

and the grid itself disappears.

what am i doing wrong here?

UPDATE

As @WestLangley pointed out the comments: Never try to apply texture / materials after things have been rendered. Create materials before rendering the object to the scene, and then modify them using:

 obj.material.map = texture 

Answer 1

With WebGLRenderer you cannot switch from material without texture to material with texture after the grid has been done once. This is because without the original texture, the geometry will not have the necessary WebGL UV baked buffers.

Walking should begin with material that has a simple white texture.

UPDATE: as an alternative, you can start with material without texture, and then add the following flags when adding texture:

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

three.js r.58

Answer 2

I also got this error while loading a scene from a blender. For me, the problem was fixed when deploying uv for each grid in which I want to have a texture.