title: When drawing a Three.js BufferGeometry lines, colors don't stick to segments
body: <p>When drawing a BufferGeometry line, I set the indices like:
  <code>indices = [1,2,2,3,3,4]</code> and the colors like: <code>colors = [r1,g1,b1,r1,g1,b1, r2,g2,b2,r2,g2,b2, r3,g3,b3,r3,g3]</code>. Yet, the colors don't stick to the segments and go beyond them, eventually blending with the next color. Something I have noticed is that it doesn't draw all the colors, only the first, like if it was coloring segment and a half per color.
  I have created a fiddle: <a href="http://jsfiddle.net/0f1oxdjx/" rel="nofollow noreferrer">http://jsfiddle.net/0f1oxdjx/</a></p>
  
  <pre><code>var positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
  var colors = new Float32Array(2*(MAX_POINTS-1)*3);
  var indices = new Uint16Array(2*(MAX_POINTS-1));
  var x = y = z = index = 0;
  
  for ( var i = 0, l = MAX_POINTS; i &lt; l; i ++ ) {
      positions[ index ++ ] = x;
      positions[ index ++ ] = y;
      positions[ index ++ ] = z;
      x += ( Math.random() - 0.5 ) * 300;
      y += ( Math.random() - 0.5 ) * 300;
      z += ( Math.random() - 0.5 ) * 300;
  }
  var iindex = 0, cindex = 0;
  for ( var i = 1, l = MAX_POINTS; i &lt; l; i ++ ) {
      indices[iindex++] = i-1;
      indices[iindex++] = i;
      x = ( Math.random() );
      y = ( Math.random() );
      z = ( Math.random() );
      colors[ cindex ++ ] = x;
      colors[ cindex ++ ] = y;
      colors[ cindex ++ ] = z;
  
      colors[ cindex ++ ] = x;
      colors[ cindex ++ ] = y;
      colors[ cindex ++ ] = z;
  }
  geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ));
  geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
  geometry.setIndex(new THREE.BufferAttribute( indices, 1 ));
  
  // material
  var material = new THREE.LineBasicMaterial({vertexColors:THREE.VertexColors, linewidth:2});    
  </code></pre>
  
  <p>Edited the fiddle.</p>