Dibujando una línea con three.js dinámicamente

Esto es lo que me gustaría lograr (un polígono modificable donde los círculos rojos son vértices) y me gustaría construir el polígono dinámicamente.

Al iniciar la geometría como

var geometry = new THREE.Geometry();

geometry.vertices.push(point);
geometry.vertices.push(point);

var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({}));

funciona bien hasta el segundo clic, construye una línea recta entre 1 y 2 pero no agrega una tercera línea cuando se empuja a la matriz. WebGL parece requerir puntos almacenados.

Cuando defino vértices como este, puedo dibujar dos líneas (tercer clic)

var geometry = new THREE.Geometry();

for (var i = 0; i < 4; i++) {
    geometry.vertices.push(point);
}

var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({}));

pero esta no es una buena solución ya que no sé cuántos vértices quiere agregar el usuario y no tiene sentido asignarle un gran número, ya que tengo que repetirlo varias veces.

¿Hay alguna manera de evitarlo?

Respuestas a la pregunta(3)

Su respuesta a la pregunta