Wie man ein transparentes Loch zum Objekt macht, das eine Bildtextur in THREE.js hat?

Question

Ich habe ein Haus mit Wänden, Decke und Boden gemacht. Jetzt versuche ich Löcher in Wände für Fenster/Türen zu machen. Aber es gibt ein Problem in Texturen der Wände.

Das ist Funktion Mauer zu bauen:

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 > 0.9) wall.faces[ face ].materialIndex = 0; 
      else if (wall.faces[ face ].normal.z < -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); 
    } 

und ich diese Funktion in init nenne():

//------Add Walls 
      coordArray.push(coordArray[0]); //push the first corner to close loop 

      for(var i = 0; i < 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 > maxX) maxX = start_wall.x; 
       if(start_wall.y > maxY) maxY = start_wall.y; 
       if(start_wall.x < minX) minX = start_wall.x; 
       if(start_wall.y < minY) minY = start_wall.y; 

      } 

Das Ergebnis ist wie folgt:

The screenshot of the result

Answer 1

Sorry, es war weil ich die UVs nicht auf den [0, 1] Bereich eingestellt habe.

var uvs = wall.faceVertexUvs[0]; 
     for (var i = 0; i < uvs.length; i++) { 

      uv = uvs[i]; 

      for (var j = 0; j < uv.length; j++) { 

       u = uv[j]; 

       u.x = u.x/wall_length; 
       u.y = u.y/ wall_height; 
      } 
     } 

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