three.js - Three JS Map Material causes WebGL Warning -
i'm trying define material meshes loaded in objloader through 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 meshes loaded obj , apply texture 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 } ); // 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 webgl warning, won't show texture either; } else { // works 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 texture has loaded , it's time apply material mesh, start getting following warning on console:
.webglrenderingcontext: gl error :gl_invalid_operation : gldrawelements: attempt access out of range vertices in attribute 0
and mesh disappears.
what doing wrong here?
update
as @westlangley pointed on comments: never try apply texture/materials after things have been rendered. create materials before rendering object scene , change them using:
obj.material.map = texture
with webglrenderer
, can't switch material without texture, material texture, after mesh has been rendered once. because, without initial texture, geometry not have necessary baked-in webgl uv buffers.
a work-around begin material having simple white texture.
update: alternatively, can begin textureless material, , set following flags when texture added:
material.needsupdate = true; geometry.buffersneedupdate = true; geometry.uvsneedupdate = true;
three.js r.58
Comments
Post a Comment