Zeichne eine Linie mit three.js dynamisch

Dies ist, was ich erreichen möchte (ein modifizierbares Polygon, bei dem die roten Kreise Eckpunkte sind) und ich möchte das Polygon dynamisch erstellen.

Beim Einleiten der Geometrie als

var geometry = new THREE.Geometry();

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

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

it funktioniert gut, bis der zweite Klick erfolgt. Es wird eine gerade Linie zwischen 1 und 2 erstellt, aber keine dritte Linie hinzugefügt, wenn sie in das Array verschoben wird. WebGL scheint gepufferte Punkte zu erfordern.

Wenn ich solche Eckpunkte vordefiniere, kann ich zwei Linien zeichnen (dritter Klick)

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

Aber dies ist keine gute Lösung, da ich nicht weiß, wie viele Eckpunkte der Benutzer hinzufügen möchte, und es sinnlos ist, ihm eine große Zahl zuzuweisen, da ich ihn mehrmals schleifen muss.

Ist da ein Weg dran vorbei?

Antworten auf die Frage(6)

Ihre Antwort auf die Frage