Yocker
  1. Yocker
  3. Disegnare una linea con three.js in modo dinamico
Intereting Posts
SyntaxError: uso di const in modalità strict? MATLAB: disegno di una linea su un’immagine in bianco e nero Invio e ricezione di array 2D su MPI Errore in plot.new (): i margini delle figure sono troppo grandi in R Come determinare se una stringa contiene caratteri codificati non validi come fare il conto alla rovescia per una data Nidificare le classi CSS Qual è la differenza tra <%, <% =, in ERB in Rails? Gli orientamenti supportati non hanno un orientamento comune con l’applicazione, e shouldAutorotate sta restituendo SI ‘ Non è consentito eseguire sendEmail () dalla funzione personalizzata, ma OK nell’editor di script Parentesi che circonda i valori di ritorno HttpWebRequest a URL con punto alla fine Chiave rossa strana con dati primaverili Jedis Come creare un colore di sfondo casuale con Swift Errore di accesso thread non valido con Java SWT

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