NgtsSegments

Preview

Credits: Segments from Drei

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-segments',
    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: 'segments-demo relative block h-full' },
    imports: [NgtCanvas, SobaWrapper, SceneGraph],
})
export default class Segments {
    static clientProviders = [provideNgtRenderer()];
}

scene-graph.ts

import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { NgtsSegment, NgtsSegments } from 'angular-three-soba/performances';

@Component({
    selector: 'app-scene-graph',
    template: `
        <ngts-segments [options]="{ limit: 100, lineWidth: 2 }">
            @for (segment of segments; track $index) {
                <ngts-segment [start]="segment.start" [end]="segment.end" [color]="segment.color" />
            }
        </ngts-segments>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtsSegments, NgtsSegment],
})
export class SceneGraph {
    segments: { start: [number, number, number]; end: [number, number, number]; color: string }[] = [];

    constructor() {
        const colors = ['#ff6b6b', '#4ecdc4', '#ffe66d'];
        for (let i = 0; i < 20; i++) {
            this.segments.push({
                start: [(Math.random() - 0.5) * 4, (Math.random() - 0.5) * 4, (Math.random() - 0.5) * 4],
                end: [(Math.random() - 0.5) * 4, (Math.random() - 0.5) * 4, (Math.random() - 0.5) * 4],
                color: colors[Math.floor(Math.random() * colors.length)],
            });
        }
    }
}

NgtsSegments efficiently renders multiple line segments using a single draw call via Line2 from three-stdlib. This is ideal for drawing many independent line segments with consistent performance.

Usage

import { NgtsSegments, NgtsSegment } from 'angular-three-soba/performances';

<ngts-segments [options]="{ lineWidth: 2, limit: 100 }">
    <ngts-segment [start]="[0, 0, 0]" [end]="[1, 1, 1]" [color]="'red'" />
    <ngts-segment [start]="[1, 1, 1]" [end]="[2, 0, 0]" [color]="'blue'" />
</ngts-segments>

NgtsSegment

A single line segment within NgtsSegments. Each segment has a start point, end point, and optional color.

Drawing a Graph

@Component({
    template: `
        <ngts-segments [options]="{ lineWidth: 1.5 }">
            @for (edge of edges(); track $index) {
                <ngts-segment
                    [start]="edge.from"
                    [end]="edge.to"
                    [color]="edge.color"
                />
            }
        </ngts-segments>
    `
})
export class GraphVisualization {
    edges = signal<Edge[]>([]);
}

Connecting Objects

<ngts-segments [options]="{ lineWidth: 2 }">
    @for (connection of connections(); track connection.id) {
        <ngts-segment
            [start]="connection.source.position"
            [end]="connection.target.position"
            [color]="connection.active ? 'lime' : 'gray'"
        />
    }
</ngts-segments>

Performance Notes

• All segments share the same material properties (lineWidth, etc.)
• For independent lines with different widths, use NgtsLine instead
• Set limit based on your expected maximum number of segments

Inputs

name	type	description	required
start	NgtVector3	Starting point [x, y, z]	yes
end	NgtVector3	Ending point [x, y, z]	yes
color	THREE.ColorRepresentation	Segment color	no

Options

Properties

name	type	description
limit	number	Maximum number of segments, default to 1000
lineWidth	number	Width of the line segments, default to 1.0