Erstellen von Löchern in three.js

Question

Dies ist tatsächlich aus THREEJS: add hole to rendered Shape entnommen. Aber es funktioniert immer noch nicht.

Der Fehler ist

three.js:34206 Uncaught TypeError: Cannot read property 'concat' of undefined

var plane, vertices = [], planeShape; 
     var planeMaterial = new THREE.MeshLambertMaterial({color: 0xC0C0C0}); 

     vertices.push(
      new THREE.Vector3(-room_width/2,room_depth/2,0), 
      new THREE.Vector3(room_width/2,room_depth/2,0), 
      new THREE.Vector3(room_width/2,-room_depth/2,0), 
      new THREE.Vector3(-room_width/2,-room_depth/2,0) 
     ); 

     planeShape = new THREE.Shape(vertices); 

     plane = new THREE.Mesh(new THREE.ShapeGeometry(planeShape), planeMaterial); 

     scene.add(plane); 

     var holes = [ 
      new THREE.Vector3(-room_width/4,room_depth/4,0), 
      new THREE.Vector3(room_width/4,room_depth/4,0), 
      new THREE.Vector3(room_width/4,-room_depth/4,0), 
      new THREE.Vector3(-room_width/4,-room_depth/4,0) 
     ], 

     hole = new THREE.Path(); 
     hole.fromPoints(holes); 

     var shape = new THREE.Shape(plane.geometry.vertices); 
     shape.holes = [hole]; 
     var points = shape.extractPoints(); 

     plane.geometry.faces = []; 

     var triangles = THREE.ShapeUtils.triangulateShape (points.vertices, points.holes); 

     for(var i = 0; i < triangles.length; i++){ 
      plane.geometry.faces.push(new THREE.Face3(triangles[i][0], triangles[i][1], triangles[i][2])); 
     } 

bearbeitet ::: AM

 var plane, vertices = [], planeShape; 
     var planeMaterial = new THREE.MeshLambertMaterial({color: 0xC0C0C0}); 

     vertices.push(
      new THREE.Vector3(-150,-150,0), 
      new THREE.Vector3(150,-150,0), 
      new THREE.Vector3(150,150,0), 
      new THREE.Vector3(-150,150,0) 
     ); 

     planeShape = new THREE.Shape(vertices); 

     plane = new THREE.Mesh(new THREE.ShapeGeometry(planeShape), planeMaterial); 

     scene.add(plane); 

     var holes = [ 
      new THREE.Vector3(-75,-75,0), 
      new THREE.Vector3(75,-75,0), 
      new THREE.Vector3(75,75,0), 
      new THREE.Vector3(-75,75,0) 
     ], 

     hole = new THREE.Path(); 
     hole.fromPoints(holes); 

     var shape = new THREE.Shape(plane.geometry.vertices); 
     shape.holes = [hole]; 
     var points = shape.extractPoints(); 

     plane.geometry.faces = []; 

     var triangles = THREE.ShapeUtils.triangulateShape (points.shape, points.holes); 

     plane.geometry.vertices.push(
      new THREE.Vector3(-75,-75,0), 
      new THREE.Vector3(75,-75,0), 
      new THREE.Vector3(75,75,0), 
      new THREE.Vector3(-75,75,0) 
     ); 
     for(var i = 0; i < triangles.length; i++){ 
      plane.geometry.faces.push(new THREE.Face3(triangles[i][0], triangles[i][1], triangles[i][2])); 
     } 

Answer 1

Für jeden auf diese Stolper gibt jetzt eine viel einfachere Art und Weise ist mit Löchern im Vergleich zum alten zu arbeiten "THREE.ShapeUtils.triangulateShape" und konstruiere die Dreiecke selbst.

//vertices is the main shape/contour/exterior, a "ring" as a list of THREE.Vector2 instances 
//holes is a list of THREE.Path instances, created from THREE.Vector2 
//If you pass THREE.Vector3 then the Z property is ignored. 

var shape = new THREE.Shape(vertices); 
shape.holes = holes; 

var geometry = new THREE.ShapeBufferGeometry(shape); 

...