Рисование линии с помощью Three.js динамически

Это то, чего я хотел бы достичь (модифицируемый многоугольник, где красные круги - это вершины), и я хотел бы построить многоугольник динамически.

При инициации геометрии как

var geometry = new THREE.Geometry();

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

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

он работает хорошо до второго щелчка, он строит прямую линию между 1 и 2, но не добавляет третью строку, когда он помещается в массив. WebGL, похоже, требует буферизованных точек.

Когда я заранее определяю такие вершины, я могу нарисовать две линии (третий щелчок)

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({}));

но это не очень хорошее решение, так как я не знаю, сколько вершин хочет добавить пользователь, и бессмысленно назначать ему большое число, так как мне приходится повторять его несколько раз.

Есть ли способ обойти это?