使用three.js在網站中繪製正方形

爲什麼下面的代碼不能繪製完整的正方形？使用three.js在網站中繪製正方形

var square = new THREE.Geometry(); 
     square.vertices.push(new THREE.Vector3(0, 0, 0)); 
     square.vertices.push(new THREE.Vector3(0, 100, 0)); 
     square.vertices.push(new THREE.Vector3(100, 100, 0)); 
     square.vertices.push(new THREE.Vector3(100, 0, 0)); 
     square.faces.push(new THREE.Face3(0, 1, 2)); 
     square.faces.push(new THREE.Face3(0, 3, 2)); 

     var line = new THREE.Line(square, new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.5 })); 
     scene.add(line);

我得到以下結果： enter image description here

來源

2014-12-21 Frank_Vr

您還需要繪製的最後一行回0,0,0。 – mrdoob

謝謝，但這將如何工作與face3 –

只是忽略最後一個向量？ –

square.vertices.push(new THREE.Vector3(0, 0, 0)); 
square.vertices.push(new THREE.Vector3(0, 100, 0)); 
square.vertices.push(new THREE.Vector3(100, 100, 0)); 
square.vertices.push(new THREE.Vector3(100, 0, 0)); 

square.vertices.push(new THREE.Vector3(0, 0, 0)); 

square.faces.push(new THREE.Face3(0, 1, 2)); 
square.faces.push(new THREE.Face3(0, 3, 2)); 

var line = new THREE.Line(square, new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.5 })); 
scene.add(line);

來源

2014-12-21 08:25:15

使用three.js在網站中繪製正方形

回答

相關問題