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 ofthree.meshfacematerial
:mesh2 = new three.mesh(geometry2, new three.multimaterial( materials ));
Comments
Post a Comment