title: Adding & removing vertices from THREE.LineSegment
body: <p>I've got a <code>THREE.LineSegments</code> object, and I want to change the number of vertices dynamically. When I modify the geometry vertices array, though, any lines with vertices that were removed just stay put.</p>
  
  <p>Is there a way to remove vertices after the geometry has been created?</p>
  
  <p>e.g., Below I'm taking a <code>LineSegments</code> object with 3 segments, and trying to change it later to have only 2 segments. The last line segment remains.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var scene,
      renderer,
      camera;
  
  var line;
  
  initScene();
  initLine();
  
  setInterval(update, 500);
  
  
  function initScene() {
  
    camera   = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000),
    scene    = new THREE.Scene();
    renderer = new THREE.WebGLRenderer();
  
    camera.position.z = 5;
    scene.add(camera);
  
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
  
  }
  
  function initLine() {
  
    var verts = [
      randomV3(),
      randomV3(),
      randomV3(),
      randomV3()
    ];
  
    var geom = new THREE.Geometry();
  
    geom.vertices = [
      verts[0], verts[1],
      verts[1], verts[2],
      verts[2], verts[3]
    ];
  
    line = new THREE.LineSegments(geom, new THREE.LineBasicMaterial({
      color: 0xff00ff,
      linewidth: 3
    }));
  
    scene.add(line);
    renderer.render(scene, camera);
  
  }
  
  function update() {
  
    var verts = [
      randomV3(),
      randomV3(),
      randomV3()
    ];
  
    line.geometry.vertices = [
      verts[0], verts[1],
      verts[1], verts[2]
    ];
    line.geometry.verticesNeedUpdate = true;
  
    renderer.render(scene, camera);
  
  }
  
  function randomV3() {
    return new THREE.Vector3(
      (Math.random() * 4) - 2,
      (Math.random() * 4) - 2,
      0
    )
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    padding: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>