Disegnare una linea con three.js in modo dinamico

Questo è quello che mi piacerebbe ottenere (un poligono modificabile in cui i cerchi rossi sono i vertici) e mi piacerebbe build il poligono in modo dinamico.

inserisci la descrizione dell'immagine qui

Quando si inizia la geometria come

var geometry = new THREE.Geometry(); geometry.vertices.push(point); geometry.vertices.push(point); var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({})); 

funziona bene fino al secondo clic, costruisce una linea retta tra 1 e 2, ma non aggiunge una terza riga quando viene spinta all’array. WebGL sembra richiedere punti bufferizzati.

Quando predefinisco i vertici come questo posso disegnare due linee (terzo 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({})); 

ma questa non è una buona soluzione in quanto non so quanti vertici l’utente desidera aggiungere ed è inutile assegnargli un numero elevato in quanto devo effettuare il loop più volte.

C’è un modo per aggirarlo?

Puoi animare una linea – o aumentare il numero di punti renderizzati – molto facilmente usando BufferGeometry e il metodo setDrawRange() . Tuttavia, è necessario impostare un numero massimo di punti.

 var MAX_POINTS = 500; // geometry var geometry = new THREE.BufferGeometry(); // attributes var positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) ); // draw range drawCount = 2; // draw the first 2 points, only geometry.setDrawRange( 0, drawCount ); // material var material = new THREE.LineBasicMaterial( { color: 0xff0000 } ); // line line = new THREE.Line( geometry, material ); scene.add( line ); 

Puoi impostare i dati di posizione usando un modello come questo:

 var positions = line.geometry.attributes.position.array; var x = y = z = index = 0; for ( var i = 0, l = MAX_POINTS; i < l; i ++ ) { positions[ index ++ ] = x; positions[ index ++ ] = y; positions[ index ++ ] = z; x += ( Math.random() - 0.5 ) * 30; y += ( Math.random() - 0.5 ) * 30; z += ( Math.random() - 0.5 ) * 30; } 

Se vuoi cambiare il numero di punti visualizzati dopo il primo rendering, fai questo:

 line.geometry.setDrawRange( 0, newValue ); 

Se si desidera modificare i valori dei dati di posizione dopo il primo rendering, impostare il flag needsUpdate modo:

 line.geometry.attributes.position.needsUpdate = true; // required after the first render 

Ecco un violino che mostra una linea animata che puoi adattare al tuo caso d'uso.


EDIT: vedi questa risposta per una tecnica che ti può piacere di più - specialmente se la linea è composta da pochi punti.

three.js r.84

Ho aggiornato il violino con gli eventi del mouse e un vettore vettoriale se vuoi scrivere a mano libera.

https://jsfiddle.net/w67tzfhx/40/

 function onMouseDown(evt) { if(evt.which == 3) return; var x = ( event.clientX / window.innerWidth ) * 2 - 1; var y = - ( event.clientY / window.innerHeight ) * 2 + 1; // do not register if right mouse button is pressed. var vNow = new THREE.Vector3(x, y, 0); vNow.unproject(camera); console.log(vNow.x + " " + vNow.y+ " " + vNow.z); splineArray.push(vNow); document.addEventListener("mousemove",onMouseMove,false); document.addEventListener("mouseup",onMouseUp,false); } 

Disegna una linea in tempo reale

Qui un violino aggiornato in cui ho ottimizzato il codice da user3325025 nel suo esempio; In questo caso non è assolutamente necessario aggiornare tutti i punti della linea sul rendering. L’aggiornamento è necessario solo su onMouseMove (aggiornamento di fine riga) e onMouseDown (disegno di nuovo punto):

 // update line function updateLine() { positions[count * 3 - 3] = mouse.x; positions[count * 3 - 2] = mouse.y; positions[count * 3 - 1] = mouse.z; line.geometry.attributes.position.needsUpdate = true; } // mouse move handler function onMouseMove(event) { mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; mouse.z = 0; mouse.unproject(camera); if( count !== 0 ){ updateLine(); } } // add point function addPoint(event){ positions[count * 3 + 0] = mouse.x; positions[count * 3 + 1] = mouse.y; positions[count * 3 + 2] = mouse.z; count++; line.geometry.setDrawRange(0, count); updateLine(); }