Three JS Map Material causes WebGL Warning

问题:

I'm trying to define a material to meshes I loaded in from OBJLoader through 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") 

When the texture has loaded and it's time to apply the material to the mesh, I start getting 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 mesh itself disappears.

what am I doing wrong here?

UPDATE

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

obj.material.map = texture 

回答1:

With WebGLRenderer, you can't switch from a material without a texture, to a material with a texture, after the mesh has been rendered once. This is because, without an initial texture, the geometry will not have the necessary baked-in WebGL UV buffers.

A work-around is to begin with a material having a simple white texture.

UPDATE: Alternatively, you can begin with a textureless material, and then set the following flags when a texture is added:

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

three.js r.58

回答2:

I also got this error while loading a scene from blender. For me the problem was fixed when unwrapping the uv's for each mesh i want to have a texture on.

文章来源: Three JS Map Material causes WebGL Warning