NgtsLine

Preview

canvas.ts

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { SobaWrapper } from '@soba/wrapper.ts';
import { NgtCanvas, provideNgtRenderer } from 'angular-three/dom';
import { SceneGraph } from './scene-graph';

@Component({
    selector: 'app-line',
    template: `
        <ngt-canvas [camera]="{ position: [0, 0, 5], fov: 50 }">
            <app-soba-wrapper *canvasContent [grid]="false">
                <app-scene-graph />
            </app-soba-wrapper>
        </ngt-canvas>
    `,
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: { class: 'line-demo relative block h-full' },
    imports: [NgtCanvas, SobaWrapper, SceneGraph],
})
export default class Line {
    static clientProviders = [provideNgtRenderer()];
}

scene-graph.ts

import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { NgtsLine } from 'angular-three-soba/abstractions';
import * as THREE from 'three';

@Component({
    selector: 'app-scene-graph',
    template: `
        <ngts-line [points]="points" [options]="{ color: '#ff6b6b', lineWidth: 3 }" />
        <ngts-line [points]="curve" [options]="{ color: '#4ecdc4', lineWidth: 2 }" />
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtsLine],
})
export class SceneGraph {
    protected points: [number, number, number][] = [
        [-2, -1, 0],
        [-1, 1, 0],
        [0, -1, 0],
        [1, 1, 0],
        [2, -1, 0],
    ];

    protected curve = new THREE.CatmullRomCurve3([
        new THREE.Vector3(-2, 0, 0),
        new THREE.Vector3(-1, 1.5, 0),
        new THREE.Vector3(1, -1.5, 0),
        new THREE.Vector3(2, 0, 0),
    ]).getPoints(50);
}

NgtsLine is a port of Drei’s Line which renders a THREE.Line2 or THREE.LineSegments2 (depending on the value of segments).

Usage

import { NgtsLine } from 'angular-three-soba/abstractions';

<ngts-line [points]="[[0, 0, 0], [1, 1, 1], [2, 0, 0]]" [options]="{ color: 'hotpink', lineWidth: 2 }" />

Vertex Colors

You can use vertex colors to create multi-colored lines:

<ngts-line
    [points]="[[0, 0, 0], [1, 1, 0], [2, 0, 0]]"
    [options]="{
        vertexColors: [[1, 0, 0], [0, 1, 0], [0, 0, 1]],
        lineWidth: 3
    }"
/>

Line Segments

Set segments: true to render as THREE.LineSegments2 for disconnected line pairs:

<ngts-line
    [points]="[[0, 0, 0], [1, 1, 0], [2, 0, 0], [3, 1, 0]]"
    [options]="{ segments: true, color: 'cyan' }"
/>

---

NgtsQuadraticBezierLine

Renders a THREE.Line2 using THREE.QuadraticBezierCurve3 for interpolation.

Usage

import { NgtsQuadraticBezierLine } from 'angular-three-soba/abstractions';

<ngts-quadratic-bezier-line
    [start]="[0, 0, 0]"
    [end]="[2, 2, 0]"
    [options]="{ color: 'yellow', lineWidth: 2 }"
/>

Inputs

Input	Type	Description	Default
start	Point	Starting point of the bezier curve.	[0, 0, 0]
end	Point	Ending point of the bezier curve.	[0, 0, 0]
mid	Point	Control point. If not provided, automatically calculated.	undefined

Options

Property	Type	Description	Default
segments	number	Number of segments to approximate the bezier curve.	20
lineWidth	number	Line width.	1

---

NgtsCubicBezierLine

Renders a THREE.Line2 using THREE.CubicBezierCurve3 for interpolation.

Usage

import { NgtsCubicBezierLine } from 'angular-three-soba/abstractions';

<ngts-cubic-bezier-line
    [start]="[0, 0, 0]"
    [end]="[2, 2, 0]"
    [midA]="[0.5, 1, 0]"
    [midB]="[1.5, 1, 0]"
    [options]="{ color: 'magenta', lineWidth: 2 }"
/>

Inputs

Input	Type	Description	Required
start	Point	Start point.	Yes
end	Point	End point.	Yes
midA	Point	First control point.	Yes
midB	Point	Second control point.	Yes

Options

Property	Type	Description	Default
segments	number	Number of segments to divide the Bezier curve into.	20
lineWidth	number	Line width.	1

---

NgtsCatmullRomLine

Renders a THREE.Line2 using THREE.CatmullRomCurve3 for interpolation.

Usage

import { NgtsCatmullRomLine } from 'angular-three-soba/abstractions';

<ngts-catmull-rom-line
    [points]="[[0, 0, 0], [1, 2, 0], [2, 0, 0], [3, 2, 0]]"
    [options]="{ closed: false, curveType: 'centripetal', tension: 0.5, color: 'lime', lineWidth: 2 }"
/>

Inputs

Input	Type	Description	Required
points	Array	Array of points.	Yes

Options

Property	Type	Description	Default
closed	boolean	Whether the curve should be closed (connect end to start).	false
curveType	'centripetal' | 'chordal' | 'catmullrom'	Type of curve.	'centripetal'
tension	number	Tension parameter for the curve (0 to 1).	0.5
segments	number	Number of segments to divide the curve into for rendering.	20
lineWidth	number	Line width.	1

Inputs

name	type	description	required
points	Array<Vector3 | Vector2 | [number, number, number] | [number, number] | number>	Array of points. Accepts Vector3, Vector2, coordinate tuples, or flat numbers.	yes

Options

options input accepts any properties from THREE.Line2 in addition to the following:

Properties

name	type	description
color	THREE.ColorRepresentation	Line color. Default: 0xffffff
lineWidth	number	Line width in pixels. Default: 1
segments	boolean	Whether to render as THREE.LineSegments2 instead of THREE.Line2. Default: false
dashed	boolean	Whether the line is dashed.
vertexColors	Array<[number, number, number] | [number, number, number, number]>	Array of colors for vertex coloring. Supports RGB or RGBA tuples.