使用three.js在网站中绘制一个正方形

Question

为什么以下代码不能绘制完整的正方形？

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

我得到以下结果:

Answer 1

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