Desenhando uma linha com three.js dinamicamente

É isso que eu gostaria de alcançar (um polígono modificável, onde os círculos vermelhos são vértices) e gostaria de construir o polígono dinamicamente.

Ao iniciar a geometria como

var geometry = new THREE.Geometry();

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

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

funciona bem até o segundo clique, cria uma linha reta entre 1 e 2, mas não adiciona uma terceira linha quando é empurrada para a matriz. O WebGL parece exigir pontos em buffer.

Quando eu predefinir vértices como este, posso desenhar duas linhas (terceiro clique)

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

mas essa não é uma boa solução, pois não sei quantos vértices o usuário deseja adicionar e não faz sentido atribuir um número grande a ele, pois preciso repeti-lo várias vezes.

Existe alguma maneira de contornar isso?

questionAnswers(3)

yourAnswerToTheQuestion