Reusing Modified Three.js Geometry

I'm using Three.js to display the line of a particle following a random walk. Since geometries cannot be enlarged dynamically, I'm removing the line from the scene, altering the geometry and adding a new line to the scene. Here's the relevant code:

var step = .5;

var material = new THREE.LineBasicMaterial({ color: 0x0077ff }); 
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3(0,0,0) );
scene.add( new THREE.Line( geometry, material ) );

var render = function () {
  requestAnimationFrame( render ); 
  renderer.render(scene, camera);
  controls.update();
}

function addStep() {
  scene.remove( scene.children[1] );
  last = geometry.vertices[ geometry.vertices.length - 1 ];
  geometry.vertices.push( new THREE.Vector3( last.x + (2*Math.random()-1)*step,
        last.y + (2*Math.random()-1)*step, last.z + (2*Math.random()-1)*step ));
  scene.add( new THREE.Line( geometry.clone(), material ) );
}

setInterval( addStep, 500);
render();

This codes works, but only if the geometry is cloned at each step. If the last line of addStep() is changed to

  scene.add( new THREE.Line( geometry, material ) );

then it can be called as many times as desired before rendering starts to add line segments, but if called after rendering starts then nothing appears.

Presumably I'm missing something simple about graphics buffers or variable assignments, but I would appreciate if someone could explain why the modified geometry cannot be reused without cloning.