javascript - Two canvases as textures for plane in three.js -

i render 2 canvases textures on plane in three.js. created array 2 meshbasicmaterial , did following

texture2 = new three.texture(c1); texture3 = new three.texture(c3);  var mat1 = new three.meshbasicmaterial({ map: texture2 }); var mat2 = new three.meshbasicmaterial({ map: texture3 });      materials.push(mat1); materials.push(mat2);  mesh2 = new three.mesh(geometry2, new three.meshfacematerial( materials )); scene2.add(mesh2);    renderer2 = new three.webglrenderer({canvas:c2}); renderer2.setsize(c2.width, c2.height);  document.body.appendchild(renderer2.domelement); 

i created jsfiddle example show actual problem. second texture isn't rendered on canvas2, want show both textures on it.

reason

the reason why second texture not rendered because doesn't know faces assign first or second material to, default gives first material of them.

solution

• update three.js latest build (r76). you're running r54
• loop through faces , assign them materialindex(face3)

• use three.multimaterial instead of three.meshfacematerial:

  mesh2 = new three.mesh(geometry2, new three.multimaterial( materials ));