Dynamiczne dodawanie wierzchołków do linii w Three.js

Question

Wykreśliłem, jak narysować linię w trojkach, problemem jest to, że muszę dynamicznie dodawać wierzchołki do linii. Kiedy dodam wierzchołki do linii dynamicznie, scena nie aktualizuje się.

Próbowałem już geometry.verticesNeedUpdate = true, co wydaje się nie działać.

Answer 1

EDYCJA: Korzystając z BufferGeometry i drawcalls można teraz wdrożyć równoważną funkcjonalność. Zobacz Drawing a line with three.js dynamically.

Three.js r.71

---

Dynamicznie dodawanie wierzchołków do linii nie jest obsługiwany. Jak stwierdzono w Wiki:

można aktualizować tylko zawartość buforów, nie można zmienić rozmiar buforów (jest to bardzo kosztowne, w zasadzie równoważne tworząc nową geometrię).

Można emulować zmianę rozmiaru, wstępnie alokując większy bufor, a następnie ukrywając/ukrywając niepotrzebne wierzchołki.

Three.js r.55

Answer 2

wpadłem na to kilka dni temu też. Jak powiedział WestLangley, nie można wykonywać prawdziwej dynamicznej geometrii po wyjęciu z pudełka, ale alteredq ma kilka strategii "fałszowania" i osiągnięcia pożądanego efektu na https://github.com/mrdoob/three.js/issues/342.

W odniesieniu do komentarza dotyczącego ostatniej odpowiedzi, , nie po prostu usuń i ponownie dodaj nową linię ze sceny z każdą klatką - najprawdopodobniej otrzymasz potężne trafienie. Musisz użyć pierwszej lub drugiej strategii zastępczej alteredq.

W mojej aplikacji użyłem opcji 1 tak:

1. Tworzenie obiektu THREE.Geometry z góry i zainicjować go z jak największą liczbą wierzchołków, jak myślisz musisz (lub inaczej to dość duża liczba wierzchołków). (Będziesz także musiał je jakoś ukryć, zanim chcesz je wyświetlić - ustawiam ich pozycje tak, aby były poza ekranem.)

2. Utwórz obiekt THREE.Line z tą geometrią i dodaj do sceny.

3. Teraz, gdy chcesz dodać nowy punkt do linii, musisz indeksować wierzchołki obiektu geometrii, znaleźć ostatni nieużywany tam i zaktualizować go - zmienić współrzędne na rzeczywiste, i ustaw geometry.verticesNeedUpdate = true; (w przeciwnym razie nic nie zmieni). (Patrz How to do updates na wiki).

jestem nadal dopracowujemy jeszcze pewne szczegóły na moim podejściem, ale powinny przynajmniej pozwalają uzyskać rysowanie linii na ekranie.

Three.js R55

Answer 3

Jako odpowiedź WestLangley mówi, że nie może tego zrobić.Oto prawda hacky obejście zdecydowałem się użyć:

• przeznaczyć więcej wierzchołków niż muszę wypełnić geometry.vertices z punktu początkowego linii mojego
• Jako nowe punkty przyjść że chcę dodać, przesunąć zawartość tablicy w lewo i napisać nowy punkt w ostatnim wpisie matrycy geometry.vertices

Kod: aby utworzyć nowy wiersz:

function createNewLine(startingPoint){ 
    var geometry = new THREE.Geometry(); 
    for (i=0; i<MAX_LINE_POINTS; i++){ 
    geometry.vertices.push(startingPoint.clone()); 
    } 
    myLine = new THREE.Line(geometry, lineMaterial); 
    myLine.geometry.dynamic = true; 
    scene.add(myLine); 
    render(); 
} 

Aby dodać punkt do linii:

function addPoint(myPoint) { 
    myLine.geometry.vertices.push(myLine.geometry.vertices.shift()); //shift the array 
    myLine.geometry.vertices[maxLinePoints-1] = myPoint; //add the point to the end of the array 
    myLine.geometry.verticesNeedUpdate = true; 
    render(); 
} 

Co w końcu z czym jest linia, która ma kilka punktów ułożone na wierzchu od siebie nawzajem, a następnie przez punkty rzeczywiście chcą render. Przesłałem problem do repozytorium git three.js, aby uzyskać prostsze rozwiązanie tego problemu. https://github.com/mrdoob/three.js/issues/4716