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?