title: Why does three.js add more lines to a shape?
body: <p>I am having challenges with my three.js shape, instead of having say 12 lines forming 3 rectangles I end up having 13 lines.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>function init() {
    var material = new THREE.LineBasicMaterial({ linewidth: 2, color: 0xDF0101,opacity: 0.25  });
  
    var geometry = new THREE.Geometry();
  
    geometry.vertices.push(
    /* First Rectangle */
    new THREE.Vector3( -17.561942485257, 98.685013457785, 50.448760648027 ),
    new THREE.Vector3( -18.901369249844, 100.2812801165, 50.448760648027 ),
    new THREE.Vector3( -18.901369249844, 100.2812801165, 50.448760648027 ),
    new THREE.Vector3( -18.901369249844, 100.2812801165, -53.161059607598 ),
    new THREE.Vector3( -18.901369249844, 100.2812801165, -53.161059607598 ),
    new THREE.Vector3( -17.561942485257, 98.685013457785, -53.161059607598 ),
    new THREE.Vector3( -17.561942485257, 98.685013457785, -53.161059607598 ),
    new THREE.Vector3( -17.561942485257, 98.685013457785, 50.448760648027 ),
    /* Second Rectangle */
    new THREE.Vector3( -17.561942485257, 98.685013457785, 50.448760648027 ),
    new THREE.Vector3( -17.561942485257, 98.685013457785, -53.161059607598 ),
    new THREE.Vector3( -17.561942485257, 98.685013457785, -53.161059607598 ),
    new THREE.Vector3( -0.81522210995508, 84.63284656744, -53.161059607598 ),
    new THREE.Vector3( -0.81522210995508, 84.63284656744, -53.161059607598 ),
    new THREE.Vector3( -0.81522210995508, 84.63284656744, 50.448760648027 ),
    new THREE.Vector3( -0.81522210995508, 84.63284656744, 50.448760648027 ),
    new THREE.Vector3( -17.561942485257, 98.685013457785, 50.448760648027 ),
    /* Third Rectangle */ 
    new THREE.Vector3( -16.032964538566, 43.960245911126, 50.448760648027 ),
    new THREE.Vector3( -15.664628453558, 48.170346627754, 50.448760648027 ),
    new THREE.Vector3( -15.664628453558, 48.170346627754, 50.448760648027 ),
    new THREE.Vector3( -15.664628453558, 48.170346627754, -53.161059607598 ),
    new THREE.Vector3( -15.664628453558, 48.170346627754, -53.161059607598 ),
    new THREE.Vector3( -16.032964538566, 43.960245911126, -53.161059607598 ), 
    new THREE.Vector3( -16.032964538566, 43.960245911126, -53.161059607598 ),
    new THREE.Vector3( -16.032964538566, 43.960245911126, 50.448760648027 ),
          );
  
    var line = new THREE.Line( geometry, material );
    scene.add( line );
  
  
  }
  </code></pre>
  
  <p>Here is the result:</p>
  
  <p><a href="https://i.stack.imgur.com/bOUM0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bOUM0.png" alt="enter image description here"></a></p>
  
  <p>With full code the object looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/vOzQ5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vOzQ5.png" alt="enter image description here"></a></p>
  
  <p>All line on the side or that cross (diagonally) the diagram are all unwanted.
  The above diagram is the centrally genarated face of the following 3D object, and it must be the same as the front face of the object below:</p>
  
  <p><a href="https://i.stack.imgur.com/M1Qz3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/M1Qz3.png" alt="enter image description here"></a></p>
  
  <p>I would like some help on the best method to resolve this issue and a reason why its happening?</p>