three.js strange behaviour on transparent materials

[viveka]

Hi all,

 

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;    }