three.js strange behaviour on transparent materials - three.js

Question

Am working with the three.js and am created a scene with the House , which have the lots of door/windows on the wall , and inside the rooms there is some living things like chairs, sofas and so on, all of them are seperate mesh and which is combined as single House object , i got neraly what am expecting , but am facing some issue on the materials am having for the walls
i have attached 2 image which illustare my problem, also here am explain what am getting
Pic 1:
my model looks nice from the long shot of camera, i can see the wall attached with the doors/windows inside the room i can see the sofas
Pic 2:
while look into my room from the attached doors/windows on the wall, the other side wall get disappeared it looks transparent , but i can see the doors/windows on that wall
am not sure what is wrong with my wall
and my code is 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 });
}
// back 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;
back = outer_material;
}
if( wall_no == 2)
{
left = outer_material;
right = inner_material;
top = top_material;
bottom = bottom_material;
front = front_material;
back = back_material;
}
if( wall_no == 3)
{
left = left_material;
right = right_material;
top = top_material;
bottom = bottom_material;
front = outer_material;
back = inner_material;
}
if( wall_no == 4)
{
left = inner_material;
right = outer_material;
top = top_material;
bottom = bottom_material;
front = front_material;
back = back_material;
}
materials = [
left, // Left side
right, // Right side
top, // Top side
bottom,// Bottom side
front, // Front side
back // Back 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 });
}
// back 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;
back = outer_material;
}
if( wall_no == 2)
{
left = outer_material;
right = inner_material;
top = top_material;
bottom = bottom_material;
front = front_material;
back = back_material;
}
if( wall_no == 3)
{
left = left_material;
right = right_material;
top = top_material;
bottom = bottom_material;
front = outer_material;
back = inner_material;
}
if( wall_no == 4)
{
left = inner_material;
right = outer_material;
top = top_material;
bottom = bottom_material;
front = front_material;
back = back_material;
}
materials = [
left, // Left side
right, // Right side
top, // Top side
bottom,// Bottom side
front, // Front side
back // Back side
];
var material = new THREE.MeshFaceMaterial(materials);
return material;
}
still am getting the same set of result

Answer 1

What I have done in my THREE.js application is disable transparency completely on all your materials. Then I enable "alphaTest" parameter on my materials. What this will do is disable smooth alpha, and use a cut-off value for either transparent, or not transparent.
Here are my settings for materials:
specular: new THREE.Color( 0x101010 ),
shininess: 40,
alphaTest: 0.15,
color: new THREE.Color( 0xffffff ),
metal: true,
wrapAround: true,
side: THREE.DoubleSide
With this it is safe to set transparent: false.
If none of your objects are semi-transparent this will solve your issue. If they are semi-transparent, you have to implement much more complicated algorithms to draw transparency properly (see depth-peeling, or other methods such as drawing objects in specific orderings).