three.js strange behaviour on transparent materials -
am working three.js , created scene house , have lots of door/windows on wall , , inside rooms there living things chairs, sofas , on, of them seperate mesh , combined single house object , got neraly expecting , facing issue on materials having walls
i have attached 2 image illustare problem, here explain getting
pic 1: model looks nice long shot of camera, can see wall attached doors/windows inside room can see sofas
pic 2: while room attached doors/windows on wall, other side wall disappeared looks transparent , can see doors/windows on wall
am not sure wrong wall
and code follows:
function wall_fill(type,no_of_walls,wall_no,inner_filltype,inner_fill,outer_filltype,outer_fill,left_filltype,left_fill,right_filltype,right_fill,top_filltype,top_fill,bottom_filltype,bottom_fill,front_filltype,front_fill,back_filltype,back_fill) { var materials,inner_material,outer_material,left_material,right_material,top_material,bottom_material,front_material,back_material; // inner wall if(inner_filltype == 'texture') { var inner_texture = three.imageutils.loadtexture( baseurl+'uploads/textures/'+type+'/'+inner_fill ); inner_texture.anisotropy = renderer.getmaxanisotropy(); inner_texture.wraps = inner_texture.wrapt = three.repeatwrapping; inner_material = new three.meshphongmaterial({map: inner_texture,transparent : true,transparency : 1.0,opacity: 1.5, overdraw: 0.5}); } else if(inner_filltype == 'color') { inner_fill = parseint(inner_fill); inner_material = new three.meshbasicmaterial({color: inner_fill,transparent: false,opacity: 1.5, overdraw: 0.5,side: three.doubleside }) } else { var inner_texture = three.imageutils.loadtexture( baseurl+'uploads/textures/'+type+'/trans.png' ); inner_texture.anisotropy = renderer.getmaxanisotropy(); inner_texture.wraps = inner_texture.wrapt = three.repeatwrapping; //inner_material = new three.meshphongmaterial({map: inner_texture,transparent: true,opacity: 1.5, overdraw: 0.5 }); inner_material = new three.meshbasicmaterial({color: 0xd6d6d6,transparent: true,opacity: -1.5, overdraw: 0.5 }) } // outer wall if(outer_filltype == 'texture') { var outer_texture = three.imageutils.loadtexture( baseurl+'uploads/textures/'+type+'/'+outer_fill ); outer_texture.anisotropy = renderer.getmaxanisotropy(); outer_texture.wraps = outer_texture.wrapt = three.repeatwrapping; outer_material = new three.meshphongmaterial({map: outer_texture,transparent: true, opacity: 1.5,overdraw: 0.5, }); } else if(outer_filltype == 'color') { outer_fill = parseint(outer_fill); outer_material = new three.meshbasicmaterial({color: outer_fill,transparent: true, opacity: 1.5, overdraw: 0.5,side: three.doubleside }); } else { var outer_texture = three.imageutils.loadtexture( baseurl+'uploads/textures/'+type+'/trans.png'); outer_texture.anisotropy = renderer.getmaxanisotropy(); outer_texture.wraps = outer_texture.wrapt = three.repeatwrapping; //outer_material = new three.meshphongmaterial({map: outer_texture,transparent: true, opacity: 1.5,overdraw: 0.5 }); outer_material = new three.meshbasicmaterial({color: 0xd6d6d6,transparent: true, opacity: -1.5, overdraw: 0.5 }); } // left wall if(left_filltype == 'texture') { var left_texture = three.imageutils.loadtexture( baseurl+'uploads/textures/'+type+'/'+left_fill ); left_texture.anisotropy = renderer.getmaxanisotropy(); left_texture.wraps = left_texture.wrapt = three.repeatwrapping; left_material = new three.meshphongmaterial({map: left_texture,transparent: true, opacity: 1.5,overdraw: 0.5 }); } else if(left_filltype == 'color') { left_fill = parseint(left_fill); left_material = new three.meshbasicmaterial({color: left_fill,transparent: true, opacity: 1.5, overdraw: 0.5,side: three.doubleside }); } else { var left_texture = three.imageutils.loadtexture( baseurl+'uploads/textures/'+type+'/trans.png'); left_texture.anisotropy = renderer.getmaxanisotropy(); left_texture.wraps = left_texture.wrapt = three.repeatwrapping; //left_material = new three.meshphongmaterial({map: left_texture,transparent: true, opacity: 1.5,overdraw: 0.5 }); left_material = new three.meshbasicmaterial({color: 0xd6d6d6,transparent: true, opacity: -1.5, overdraw: 0.5 }); } // right wall if(right_filltype == 'texture') { var right_texture = three.imageutils.loadtexture( baseurl+'uploads/textures/'+type+'/'+right_fill ); right_texture.anisotropy = renderer.getmaxanisotropy(); right_texture.wraps = right_texture.wrapt = three.repeatwrapping; right_material = new three.meshphongmaterial({map: right_texture,transparent: true, opacity: 1.5,overdraw: 0.5 }); } else if(right_filltype == 'color') { right_fill = parseint(right_fill); right_material = new three.meshbasicmaterial({color: right_fill,transparent: true, opacity: 1.5, overdraw: 0.5,side: three.doubleside }); } else { var right_texture = three.imageutils.loadtexture( baseurl+'uploads/textures/'+type+'/trans.png'); right_texture.anisotropy = renderer.getmaxanisotropy(); right_texture.wraps = right_texture.wrapt = three.repeatwrapping; //right_material = new three.meshphongmaterial({map: right_texture,transparent: true, opacity: 1.5,overdraw: 0.5 }); right_material = new three.meshbasicmaterial({color: 0xd6d6d6,transparent: true, opacity: -1.5, overdraw: 0.5 }); } // top wall if(top_filltype == 'texture') { var top_texture = three.imageutils.loadtexture( baseurl+'uploads/textures/'+type+'/'+top_fill ); top_texture.anisotropy = renderer.getmaxanisotropy(); top_texture.wraps = top_texture.wrapt = three.repeatwrapping; top_material = new three.meshphongmaterial({map: top_texture,transparent: true, opacity: 1.5,overdraw: 0.5 }); } else if(top_filltype == 'color') { top_fill = parseint(top_fill); top_material = new three.meshbasicmaterial({color: top_fill,transparent: true, opacity: 1.5, overdraw: 0.5,side: three.doubleside }); } else { var top_texture = three.imageutils.loadtexture( baseurl+'uploads/textures/'+type+'/trans.png'); top_texture.anisotropy = renderer.getmaxanisotropy(); top_texture.wraps = top_texture.wrapt = three.repeatwrapping; //top_material = new three.meshphongmaterial({map: top_texture,transparent: true, opacity: 1.5,overdraw: 0.5 }); top_material = new three.meshbasicmaterial({color: 0xd6d6d6,transparent: true, opacity: -1.5, overdraw: 0.5 }); } // bottom wall if(bottom_filltype == 'texture') { var bottom_texture = three.imageutils.loadtexture( baseurl+'uploads/textures/'+type+'/'+bottom_fill ); bottom_texture.anisotropy = renderer.getmaxanisotropy(); bottom_texture.wraps = bottom_texture.wrapt = three.repeatwrapping; bottom_material = new three.meshphongmaterial({map: bottom_texture,transparent: true, opacity: 1.5,overdraw: 0.5 }); } else if(bottom_filltype == 'color') { bottom_fill = parseint(bottom_fill); bottom_material = new three.meshbasicmaterial({color: bottom_fill,transparent: true, opacity: 1.5, overdraw: 0.5,side: three.doubleside }); } else { var bottom_texture = three.imageutils.loadtexture( baseurl+'uploads/textures/'+type+'/trans.png'); bottom_texture.anisotropy = renderer.getmaxanisotropy(); bottom_texture.wraps = bottom_texture.wrapt = three.repeatwrapping; //bottom_material = new three.meshphongmaterial({map: bottom_texture,transparent: true, opacity: 1.5,overdraw: 0.5 }); bottom_material = new three.meshbasicmaterial({color: 0xd6d6d6,transparent: true, opacity: -1.5, overdraw: 0.5 }); } // front wall if(front_filltype == 'texture') { var front_texture = three.imageutils.loadtexture( baseurl+'uploads/textures/'+type+'/'+front_fill ); front_texture.anisotropy = renderer.getmaxanisotropy(); front_texture.wraps = front_texture.wrapt = three.repeatwrapping; front_material = new three.meshphongmaterial({map: front_texture,transparent: true, opacity: 1.5,overdraw: 0.5 }); } else if(front_filltype == 'color') { front_fill = parseint(front_fill); front_material = new three.meshbasicmaterial({color: front_fill,transparent: true, opacity: 1.5, overdraw: 0.5 ,side: three.doubleside}); } else { var front_texture = three.imageutils.loadtexture( baseurl+'uploads/textures/'+type+'/trans.png'); front_texture.anisotropy = renderer.getmaxanisotropy(); front_texture.wraps = front_texture.wrapt = three.repeatwrapping; //front_material = new three.meshphongmaterial({map: front_texture,transparent: true, opacity: 1.5,overdraw: 0.5 }); front_material = new three.meshbasicmaterial({color: 0xd6d6d6,transparent: true, opacity: -1.5, overdraw: 0.5 }); } // wall if(back_filltype == 'texture') { var back_texture = three.imageutils.loadtexture( baseurl+'uploads/textures/'+type+'/'+back_fill ); back_texture.anisotropy = renderer.getmaxanisotropy(); back_texture.wraps = back_texture.wrapt = three.repeatwrapping; back_material = new three.meshphongmaterial({map: back_texture,transparent: true, opacity: 1.5,overdraw: 0.5 }); } else if(back_filltype == 'color') { back_fill = parseint(back_fill); back_material = new three.meshbasicmaterial({color: back_fill,transparent: true, opacity: 1.5, overdraw: 0.5 ,side: three.doubleside}); } else { var back_texture = three.imageutils.loadtexture( baseurl+'uploads/textures/'+type+'/trans.png'); back_texture.anisotropy = renderer.getmaxanisotropy(); back_texture.wraps = back_texture.wrapt = three.repeatwrapping; //back_material = new three.meshphongmaterial({map: back_texture,transparent: true, opacity: 1.5,overdraw: 0.5 }); back_material = new three.meshbasicmaterial({color: 0xd6d6d6,transparent: true, opacity: -1.5, overdraw: 0.5 }); } var left,right,top,bottom,front,back; if( wall_no == 1) { left = left_material; right = right_material; top = top_material; bottom = bottom_material; front = inner_material; = outer_material; } if( wall_no == 2) { left = outer_material; right = inner_material; top = top_material; bottom = bottom_material; front = front_material; = back_material; } if( wall_no == 3) { left = left_material; right = right_material; top = top_material; bottom = bottom_material; front = outer_material; = inner_material; } if( wall_no == 4) { left = inner_material; right = outer_material; top = top_material; bottom = bottom_material; front = front_material; = back_material; } materials = [ left, // left side right, // right side top, // top side bottom,// bottom side front, // front side // side ]; var material = new three.meshfacematerial(materials); return material; } 
updated function
function wall_fill(type,no_of_walls,wall_no,inner_filltype,inner_fill,outer_filltype,outer_fill,left_filltype,left_fill,right_filltype,right_fill,top_filltype,top_fill,bottom_filltype,bottom_fill,front_filltype,front_fill,back_filltype,back_fill) { var materials,inner_material,outer_material,left_material,right_material,top_material,bottom_material,front_material,back_material; // inner wall if(inner_filltype == 'texture') { var inner_texture = three.imageutils.loadtexture( baseurl+'uploads/textures/'+type+'/'+inner_fill ); inner_texture.anisotropy = renderer.getmaxanisotropy(); inner_texture.wraps = inner_texture.wrapt = three.repeatwrapping; inner_material = new three.meshbasicmaterial({map: inner_texture,transparent : true, opacity:0.5,side: three.doubleside }); } else if(inner_filltype == 'color') { inner_fill = parseint(inner_fill); inner_material = new three.meshbasicmaterial({color: inner_fill,transparent: true,opacity:0.5 }) } else { var inner_texture = three.imageutils.loadtexture( baseurl+'uploads/textures/'+type+'/trans.png' ); inner_texture.anisotropy = renderer.getmaxanisotropy(); inner_texture.wraps = inner_texture.wrapt = three.repeatwrapping; //inner_material = new three.meshbasicmaterial({map: inner_texture,transparent: true }); inner_material = new three.meshbasicmaterial({color: 0xd6d6d6,transparent: true,opacity:0.5 }) } // outer wall if(outer_filltype == 'texture') { var outer_texture = three.imageutils.loadtexture( baseurl+'uploads/textures/'+type+'/'+outer_fill ); outer_texture.anisotropy = renderer.getmaxanisotropy(); outer_texture.wraps = outer_texture.wrapt = three.repeatwrapping; outer_material = new three.meshbasicmaterial({map: outer_texture,transparent: true,opacity:0.5,side: three.doubleside}); } else if(outer_filltype == 'color') { outer_fill = parseint(outer_fill); outer_material = new three.meshbasicmaterial({color: outer_fill,transparent: true, opacity:0.5}); } else { var outer_texture = three.imageutils.loadtexture( baseurl+'uploads/textures/'+type+'/trans.png'); outer_texture.anisotropy = renderer.getmaxanisotropy(); outer_texture.wraps = outer_texture.wrapt = three.repeatwrapping; //outer_material = new three.meshbasicmaterial({map: outer_texture,transparent: true }); outer_material = new three.meshbasicmaterial({color: 0xd6d6d6,transparent: true ,opacity:0.5}); } // left wall if(left_filltype == 'texture') { var left_texture = three.imageutils.loadtexture( baseurl+'uploads/textures/'+type+'/'+left_fill ); left_texture.anisotropy = renderer.getmaxanisotropy(); left_texture.wraps = left_texture.wrapt = three.repeatwrapping; left_material = new three.meshbasicmaterial({map: left_texture,transparent: true ,opacity:0.5}); } else if(left_filltype == 'color') { left_fill = parseint(left_fill); left_material = new three.meshbasicmaterial({color: left_fill,transparent: true,opacity:0.5 }); } else { var left_texture = three.imageutils.loadtexture( baseurl+'uploads/textures/'+type+'/trans.png'); left_texture.anisotropy = renderer.getmaxanisotropy(); left_texture.wraps = left_texture.wrapt = three.repeatwrapping; //left_material = new three.meshbasicmaterial({map: left_texture,transparent: true }); left_material = new three.meshbasicmaterial({color: 0xd6d6d6,transparent: true,opacity:0.5 }); } // right wall if(right_filltype == 'texture') { var right_texture = three.imageutils.loadtexture( baseurl+'uploads/textures/'+type+'/'+right_fill ); right_texture.anisotropy = renderer.getmaxanisotropy(); right_texture.wraps = right_texture.wrapt = three.repeatwrapping; right_material = new three.meshbasicmaterial({map: right_texture,transparent: true ,opacity:0.5}); } else if(right_filltype == 'color') { right_fill = parseint(right_fill); right_material = new three.meshbasicmaterial({color: right_fill,transparent: true,opacity:0.5 }); } else { var right_texture = three.imageutils.loadtexture( baseurl+'uploads/textures/'+type+'/trans.png'); right_texture.anisotropy = renderer.getmaxanisotropy(); right_texture.wraps = right_texture.wrapt = three.repeatwrapping; //right_material = new three.meshbasicmaterial({map: right_texture,transparent: true }); right_material = new three.meshbasicmaterial({color: 0xd6d6d6,transparent: true,opacity:0.5}); } // top wall if(top_filltype == 'texture') { var top_texture = three.imageutils.loadtexture( baseurl+'uploads/textures/'+type+'/'+top_fill ); top_texture.anisotropy = renderer.getmaxanisotropy(); top_texture.wraps = top_texture.wrapt = three.repeatwrapping; top_material = new three.meshbasicmaterial({map: top_texture,transparent: true,opacity:0.5 }); } else if(top_filltype == 'color') { top_fill = parseint(top_fill); top_material = new three.meshbasicmaterial({color: top_fill,transparent: true,opacity:0.5}); } else { var top_texture = three.imageutils.loadtexture( baseurl+'uploads/textures/'+type+'/trans.png'); top_texture.anisotropy = renderer.getmaxanisotropy(); top_texture.wraps = top_texture.wrapt = three.repeatwrapping; //top_material = new three.meshbasicmaterial({map: top_texture,transparent: true }); top_material = new three.meshbasicmaterial({color: 0xd6d6d6,transparent: true,opacity:0.5 }); } // bottom wall if(bottom_filltype == 'texture') { var bottom_texture = three.imageutils.loadtexture( baseurl+'uploads/textures/'+type+'/'+bottom_fill ); bottom_texture.anisotropy = renderer.getmaxanisotropy(); bottom_texture.wraps = bottom_texture.wrapt = three.repeatwrapping; bottom_material = new three.meshbasicmaterial({map: bottom_texture,transparent: true,opacity:0.5 }); } else if(bottom_filltype == 'color') { bottom_fill = parseint(bottom_fill); bottom_material = new three.meshbasicmaterial({color: bottom_fill,transparent: true, opacity:0.5}); } else { var bottom_texture = three.imageutils.loadtexture( baseurl+'uploads/textures/'+type+'/trans.png'); bottom_texture.anisotropy = renderer.getmaxanisotropy(); bottom_texture.wraps = bottom_texture.wrapt = three.repeatwrapping; //bottom_material = new three.meshbasicmaterial({map: bottom_texture,transparent: true }); bottom_material = new three.meshbasicmaterial({color: 0xd6d6d6,transparent: true,opacity:0.5 }); } // front wall if(front_filltype == 'texture') { var front_texture = three.imageutils.loadtexture( baseurl+'uploads/textures/'+type+'/'+front_fill ); front_texture.anisotropy = renderer.getmaxanisotropy(); front_texture.wraps = front_texture.wrapt = three.repeatwrapping; front_material = new three.meshbasicmaterial({map: front_texture,transparent: true,opacity:0.5 }); } else if(front_filltype == 'color') { front_fill = parseint(front_fill); front_material = new three.meshbasicmaterial({color: front_fill,transparent: true ,opacity:0.5}); } else { var front_texture = three.imageutils.loadtexture( baseurl+'uploads/textures/'+type+'/trans.png'); front_texture.anisotropy = renderer.getmaxanisotropy(); front_texture.wraps = front_texture.wrapt = three.repeatwrapping; //front_material = new three.meshbasicmaterial({map: front_texture,transparent: true }); front_material = new three.meshbasicmaterial({color: 0xd6d6d6,transparent: true,opacity:0.5 }); } // wall if(back_filltype == 'texture') { var back_texture = three.imageutils.loadtexture( baseurl+'uploads/textures/'+type+'/'+back_fill ); back_texture.anisotropy = renderer.getmaxanisotropy(); back_texture.wraps = back_texture.wrapt = three.repeatwrapping; back_material = new three.meshbasicmaterial({map: back_texture,transparent: true,opacity:0.5, }); } else if(back_filltype == 'color') { back_fill = parseint(back_fill); back_material = new three.meshbasicmaterial({color: back_fill,transparent: true ,opacity:0.5}); } else { var back_texture = three.imageutils.loadtexture( baseurl+'uploads/textures/'+type+'/trans.png'); back_texture.anisotropy = renderer.getmaxanisotropy(); back_texture.wraps = back_texture.wrapt = three.repeatwrapping; //back_material = new three.meshbasicmaterial({map: back_texture,transparent: true }); back_material = new three.meshbasicmaterial({color: 0xd6d6d6,transparent: true ,opacity:0.5}); } var left,right,top,bottom,front,back; if( wall_no == 1) { left = left_material; right = right_material; top = top_material; bottom = bottom_material; front = inner_material; = outer_material; } if( wall_no == 2) { left = outer_material; right = inner_material; top = top_material; bottom = bottom_material; front = front_material; = back_material; } if( wall_no == 3) { left = left_material; right = right_material; top = top_material; bottom = bottom_material; front = outer_material; = inner_material; } if( wall_no == 4) { left = inner_material; right = outer_material; top = top_material; bottom = bottom_material; front = front_material; = back_material; } materials = [ left, // left side right, // right side top, // top side bottom,// bottom side front, // front side // side ]; var material = new three.meshfacematerial(materials); return material; } still getting same set of result
what have done in three.js application disable transparency on materials. enable "alphatest" parameter on materials. disable smooth alpha, , use cut-off value either transparent, or not transparent.
here settings materials:
specular: new three.color( 0x101010 ), shininess: 40, alphatest: 0.15, color: new three.color( 0xffffff ), metal: true, wraparound: true, side: three.doubleside with safe set transparent: false.
if none of objects semi-transparent solve issue. if semi-transparent, have implement more complicated algorithms draw transparency (see depth-peeling, or other methods such drawing objects in specific orderings).
Comments
Post a Comment