title: How to make transparent hole to object which has image texture in THREE.js?
body: <p>I made a house with walls, ceiling and floor.
  Now I am trying to make holes in walls for windows/doors.
  But there is an issue in textures of the walls.</p>
  
  <p>This is function to build wall:</p>
  
  <pre><code>function build_wall(start, end, materialFront, id){
  
          var dx = end.x - start.x;
          var dy = end.y - start.y;
          var wall_length = Math.sqrt(dx*dx + dy*dy);
  
          var centroid_x = start.x + dx/2;
          var centroid_y = (start.y + dy/2) * -1;
  
          var ry = Math.atan2(dy, dx);
  
          var materialBack = new THREE.MeshLambertMaterial( { color: 0xd9d9d9, shading: THREE.FlatShading, side: THREE.BackSide} );
          var materialTop = new THREE.MeshBasicMaterial({color: 0xb3b3b3, side: THREE.DoubleSide});
  
          var materials = [materialFront, materialBack, materialTop];
          var material = new THREE.MeshFaceMaterial(materials);
  
          var rectShape = new THREE.Shape();
          rectShape.moveTo( 0, 0 );
          rectShape.lineTo( 0, wall_height );
          rectShape.lineTo( wall_length, wall_height );
          rectShape.lineTo( wall_length, 0 );
          rectShape.lineTo( 0, 0 );
  
          var windowHole = new THREE.Path();
          windowHole.moveTo(20, 180);
          windowHole.lineTo(20, 160);
          windowHole.lineTo(40, 160);
          windowHole.lineTo(40, 180);
  
          rectShape.holes.push(windowHole);
  
          var extrudeSettings = { amount: 5, bevelEnabled: true, bevelSegments: 0, steps: 1, bevelSize: 0, bevelThickness: 1 };
  
          var wall = new THREE.ExtrudeGeometry( rectShape, extrudeSettings );
          for ( var face in wall.faces ) {
              if (wall.faces[ face ].normal.z &gt; 0.9) wall.faces[ face ].materialIndex = 0;
              else if (wall.faces[ face ].normal.z &lt; -0.9) wall.faces[ face ].materialIndex = 1;
              else wall.faces[ face ].materialIndex = 2;
          }
  
          var wall_mesh = new THREE.Mesh(wall, material);
  
          wall_mesh.position.set( start.x, 0, -start.y );
          wall_mesh.rotation.set(0, ry, 0);
          wall_mesh.name = id;
          wall_mesh.data = 'wall';
  
          scene.add(wall_mesh);
      }
  </code></pre>
  
  <p>and I am calling this function in init():</p>
  
  <pre><code>//------Add Walls
              coordArray.push(coordArray[0]); //push the first corner to close loop
  
              for(var i = 0; i &lt; coordArray.length-1; i++){ //iterate over the coordinate array, pushing vertices to the geometry
                  var start_wall = coordArray[i];
                  var end_wall = coordArray[(i+1)];
  
                  if(!Rooms[r].wall_show || Rooms[r].wall_show[i] == 1){
                      var wallTexture = new THREE.TextureLoader().load( "images/room_" + r + "_wall_" + i + ".jpg" );
  
                      var wall_material = new THREE.MeshBasicMaterial({
                          map: wallTexture,
                          side: THREE.FrontSide,
                          overdraw: 0.5
                      });
  
                      build_wall( start_wall, end_wall, wall_material, scene_id);
                  }
  
  
                  //find tour boundary, find center target
                  if(start_wall.x &gt; maxX) maxX = start_wall.x;
                  if(start_wall.y &gt; maxY) maxY = start_wall.y;
                  if(start_wall.x &lt; minX) minX = start_wall.x;
                  if(start_wall.y &lt; minY) minY = start_wall.y;
  
              }
  </code></pre>
  
  <p>The result is as following:</p>
  
  <p><a href="http://i.stack.imgur.com/ossPL.jpg" rel="nofollow">The screenshot of the result</a></p>