在Three.js中渲染自定義幾何體

Question

我想要使用three.js在空間中的四個頂點之間繪製四邊形。我寫了下面的代碼，但它不起作用：

var a = { x:10, 
      y:10} 
var b = {x:50, 
      y:50} 

var geometry = new THREE.Geometry(); 
geometry.vertices.push(new THREE.Vector3(a.x, a.y, 2)); 
geometry.vertices.push(new THREE.Vector3(b.x, b.y, 2)); 
geometry.vertices.push(new THREE.Vector3(b.x, b.y - 60, 2)); 
geometry.vertices.push(new THREE.Vector3(a.x, a.y, 2)); 
geometry.faces.push(new THREE.Face3(0,1,2)); 
geometry.computeFaceNormals(); 
var material = new THREE.MeshBasicMaterial({ color: "0xff1100"}); 
var mesh = new THREE.Mesh(geometry, material); 
scene.add(mesh); 

我在哪裏犯錯？順便說一句，要渲染四邊形，我可以使用Face4還是必須使用Face3？ 在一個地方學習webgl功能有什麼好的來源嗎？ Three.js文檔的組織和完整性非常好。

Answer 1

四方不再受支持。您需要使用兩個Face3 S，就像這樣：

var a = { x:10, 
      y:10 } 
var b = { x:50, 
      y:50 } 

var geometry = new THREE.Geometry(); 

geometry.vertices.push(new THREE.Vector3(a.x, a.y, 2)); 
geometry.vertices.push(new THREE.Vector3(b.x, a.y, 2)); 
geometry.vertices.push(new THREE.Vector3(b.x, b.y, 2)); 
geometry.vertices.push(new THREE.Vector3(a.x, b.y, 2)); 

geometry.faces.push(new THREE.Face3(0, 1, 2)); // counter-clockwise winding order 
geometry.faces.push(new THREE.Face3(0, 2, 3)); 

geometry.computeFaceNormals(); 
geometry.computeVertexNormals(); 

提示：設置material.side = THREE.DoubleSide所以你兩邊幾何渲染。如果您確定您的幾何圖形是正確的，則可以將其重新設置爲THREE.FrontSide。

有關建議學習three.js所和WebGL看Learning WebGL and three.js

three.js所R.70