Multi-Stop-Gradient in Three.js für Linien

Question

Dies zeigt ein Beispiel, wie eine zweifarbige Steigung entlang einer Three.js Linie zu schaffen:

Color Gradient for Three.js line

Wie implementieren Sie einen Multi-Stopp Farbverlauf entlang einer Linie? Es sieht so aus, als würden Attribute nur über zwei Werte interpolieren (ich habe versucht, drei zu übergeben, es hat nur mit den ersten beiden Werten funktioniert).

Answer 1

Dies ist die Do-it-yourself-Ansatz Farbverlauf:

eine Linie Geometrie erstellen und einige Eckpunkte hinzu:

var lineGeometry = new THREE.Geometry(); 
lineGeometry.vertices.push( 
    new THREE.Vector3(-10, 0, 0), 
    new THREE.Vector3(-10, 10, 0) 
); 

verwenden einige Hilfsfunktionen für die Bequemlichkeit:

var steps = 0.2; 
var phase = 1.5; 
var coloredLine = getColoredBufferLine(steps, phase, lineGeometry); 
scene.add(coloredLine); 

jsfiddle: http://jsfiddle.net/L0rdzbej/276/

---

Erklärung:

getColoredBufferLine erstellt eine neue Puffergeometrie aus der Geometrie, die nur der Bequemlichkeit dient. Es iteriert dann die Scheitelpunkte und weist jedem Scheitelpunkt eine Farbe zu. Die Farbe wird mit einem anderen Helfer berechnet: color.set (makeColorGradient(i, frequency, phase));.

Wo im Grunde frequency definiert, wie viele Farbänderungen die Zeile erhalten soll.

Und phase ist eine Verschiebung des Farbspektrums (= mit welcher Farbe beginnt die Linie).

Ich habe ein dat.gui hinzugefügt, damit Sie mit den Parametern herumspielen können. Wenn Sie die Farbwiederholung oder den Farbtyp ändern möchten, können Sie die Funktion makeColorGradient an Ihre Bedürfnisse anpassen. Diese Seite bietet eine gute Erklärung, wie Gradienten erzeugt werden und wo mein Beispiel basiert: http://krazydad.com/tutorials/makecolors.php.