Aggiunta dinamica di vertici a una riga in Three.js

Question

Ho scoperto come disegnare una linea in threejs, il problema è che ho bisogno di aggiungere in modo dinamico i vertici alla linea. Quando aggiungo verticalmente i vertici alla linea, la scena non si aggiorna.

Ho provato geometry.verticesNeedUpdate = true, che non sembra funzionare.

Answer 1

MODIFICA: utilizzando BufferGeometry e drawcalls è ora possibile implementare funzionalità equivalenti. Vedi Drawing a line with three.js dynamically.

Three.js r.71

---

dinamicamente aggiungendo vertici per una linea non è supportato. Come indicato nel Wiki:

È possibile aggiornare solo il contenuto dei buffer, non è possibile ridimensionare i buffer (questo è molto costosa, in pratica equivale alla creazione di una nuova geometria).

È possibile emulare il ridimensionamento pre-allocando un buffer più grande e mantenendo i vertici non necessari collassati/nascosti.

Three.js r.55

Answer 2

mi sono imbattuto in questo un paio di giorni fa troppo. Come ha detto WestLangley, non si può fare la vera geometria dinamica fuori dalla scatola, ma alteredq ha un paio di strategie per "falsificarlo" e ottenere l'effetto desiderato a https://github.com/mrdoob/three.js/issues/342.

Per quanto riguarda il tuo commento su l'ultima risposta, non lo fanno semplicemente rimuovere e ri-aggiungere una nuova riga dalla scena ogni fotogramma - si (più probabile) incorrere in un enorme calo di prestazioni. È necessario utilizzare il primo o il secondo delle strategie alternative di alteredq.

Nella mia app ho usato l'opzione 1 in questo modo:

1. Creare un oggetto THREE.Geometry in anticipo e inizializzare con il maggior numero di vertici come si pensa di cui ha bisogno (o comunque un numero piuttosto elevato di vertici). (Dovrai anche nasconderli in qualche modo prima di visualizzarli: imposto le loro posizioni sullo schermo.)

2. Creare un oggetto THREE.Line con quella geometria e aggiungerlo alla scena.

3. Ora, quando si desidera aggiungere un nuovo punto alla linea, è necessario indicizzarlo nei vertici dell'oggetto della geometria, trovare l'ultimo inutilizzato e aggiornarlo, cambiare le coordinate in quelle reali, e imposta geometry.verticesNeedUpdate = true; (altrimenti non pensa che sia cambiato nulla). (Vedere How to do updates sul wiki.)

Sto ancora aggiustando il tiro sul mio approccio, ma che dovrebbe almeno permetterà di ottenere una linea di disegnare sullo schermo.

Three.js R55

Answer 3

Come risposta di WestLangley dice, non si può fare questo.Ecco la soluzione per ammissione hacky ho deciso di utilizzare:

• allocare più vertici di cui ho bisogno riempiendo geometry.vertices con il punto di partenza della mia linea
• Come nuovi punti vengono in che voglio aggiungere, spostare i contenuti della matrice a sinistra e scrivere il nuovo punto nella ultima voce gamma di geometry.vertices

Codice: per creare una nuova linea:

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

.210

Per aggiungere un punto alla linea:

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

Che cosa si finisce con l'allora è una linea che ha un sacco di punti ammucchiati uno sopra l'altro, seguito dai punti che realmente desidera eseguire il rendering. Ho inviato un problema sul repository git three.js per una soluzione più semplice a questo problema. https://github.com/mrdoob/three.js/issues/4716