A ponthalmazhoz hasonlóan itt is egy új geometriát hozunk létre, amelyhez térbeli pontokat adunk hozzá. Opcionálisan minden pont kaphat önálló színt is, mint a ponthalmaznál. A térbeli pontokat egyenes szakaszokkal összekötve rajzolja majd ki a rendszer. A pontoknál látotton túl itt index tömb megadására is lehetőség van, ha csúcspontokat újra fel szeretnénk használni más egyenes szakaszok definiálásához. Az indexeléssel a háromszögek kapcsán fogunk részletesebben foglalkozni.

let vertices = [];
vertices.push(
        1, 0, 0,   // V0
        4, 6, 5,   // V1
        7, 3, 3,   // V2
        10, 7, -3  // V3
);

let vertexColors = [];
vertexColors.push( // float RGB
    1.0, 1.0, 0.0,
    1.0, 1.0, 0.0,
    1.0, 0.0, 0.0,
    0.0, 0.0, 1.0
);

// Geometria + attribútum beállítások
let geometry = new THREE.BufferGeometry();
geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( vertexColors, 3 ) );

A vonalhoz kétféle anyag közül választhatunk. A LineBasicMaterial folytonos vonalat, a LineDashedMaterial szaggatott megjelenítést biztosít. Mindkettő konstruktorának egy paraméterhalmazt adhatunk át, amelyek utólagosan az attribútum nevének segítségével is módosíthatók.

LineBasicMaterial attribútumok:

LineDashedMaterial attribútumok:

A vonalszaggatás helyes működéséhez létrehozása után meg kell hívni a vonal objektum computeLineDistances() függvényét is!

Példa

let material = new THREE.LineBasicMaterial( { color: 0xffff00 } );

Dokumentáció

• LineBasicMaterial
• LineDashedMaterial

A geometriánál megadott pontokat köti össze összefüggő vonalszakaszokkal, tehát N-1 darab szakaszt kapunk, ahol N a pontok száma. Meg kell adnunk a vonal anyagát is.

let line = new THREE.Line( geometry, material );
scene.add( line );

A geometria pontjai felváltva a vonalszakaszok kezdő- és végpontját jelentik, vagyis N/2 darab szakaszt kapunk, ahol N a pontok száma. Páros számú pontot kell megadnunk a geometriánál.

let line = new THREE.LineSegments( geometry, material );
scene.add( line );