title: Drawing a line with three.js dynamically
body: <p>This is what I'd like to achieve (a modifiable polygon where the red circles are vertices) and I'd like to build the polygon dynamically.</p>
  
  <p><img src="https://i.stack.imgur.com/aVBCe.png" alt="enter image description here"></p>
  
  <p>When initiating the geometry as</p>
  
  <pre><code>var geometry = new THREE.Geometry();
  
  geometry.vertices.push(point);
  geometry.vertices.push(point);
  
  var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({}));
  </code></pre>
  
  <p>it works well until the second click, it builds a straight line between 1 and 2 but does not add a third line when it's pushed to the array. WebGL seems to require buffered points.</p>
  
  <p>When I predefine vertices like this I can draw two lines (third click)</p>
  
  <pre><code>var geometry = new THREE.Geometry();
  
  for (var i = 0; i &lt; 4; i++) {
      geometry.vertices.push(point);
  }
  
  var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({}));
  </code></pre>
  
  <p>but this is not a good solution as I don't know how many vertices does the user want to add and it's pointless to assign it a big number as I have to loop it multiple times.</p>
  
  <p>Is there any way around it?</p>