title: Drawing a square in a website using three.js
body: <p>Why does the following code not draw a complete square?</p>
  
  <pre><code>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);
  </code></pre>
  
  <p>i get the following result:
  <img src="https://i.stack.imgur.com/cc4iq.png" alt="enter image description here"></p>