three.js創建洞

這實際上是從THREEJS: add hole to rendered Shape。但它仍然無法正常工作。three.js創建洞

的錯誤是

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

編輯::: ANS

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

來源

2016-05-31 user263042

請發表可運行example.hard測試代碼 –

很抱歉，但我不明白您的評論 – user263042

你應該提供完整的最少的代碼example.your代碼有很多的錯誤，因爲它只是code.if的一半我想要測試你的代碼，我必須添加three.js，聲明所有未聲明的變量..修正所有錯誤一個接一個。這就是爲什麼你還沒有得到任何答案。如果你真的希望得到一個答案，你必須花一些時間問一個好問題 –

對於任何磕磕絆絆到這一點，現在有有孔的工作相比老一個更簡單的方法「THREE.ShapeUtils.triangulateShape」並自己構建三角形。

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

...

來源

2017-06-18 13:37:27 python1981

three.js創建洞

回答

相關問題