NgtsEdges

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-edges',
    template: `
        <ngt-canvas [camera]="{ position: [3, 3, 3], fov: 50 }">
            <app-soba-wrapper *canvasContent>
                <app-scene-graph />
            </app-soba-wrapper>
        </ngt-canvas>
    `,
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: { class: 'edges-demo relative block h-full' },
    imports: [NgtCanvas, SobaWrapper, SceneGraph],
})
export default class Edges {
    static clientProviders = [provideNgtRenderer()];
}

scene-graph.ts

import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { NgtArgs } from 'angular-three';
import { NgtsEdges } from 'angular-three-soba/abstractions';

@Component({
    selector: 'app-scene-graph',
    template: `
        <ngt-mesh>
            <ngt-box-geometry *args="[1.5, 1.5, 1.5]" />
            <ngt-mesh-standard-material color="#4ecdc4" />
            <ngts-edges [options]="{ threshold: 15, color: '#222', lineWidth: 2 }" />
        </ngt-mesh>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtArgs, NgtsEdges],
})
export class SceneGraph {}

NgtsEdges is a port of Drei’s Edges which abstracts THREE.EdgesGeometry. It pulls the geometry automatically from its parent, optionally you can ungroup it and give it a geometry prop. NgtsEdges is based on NgtsLine and supports all of its options.

Usage

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

<ngt-mesh>
    <ngt-box-geometry />
    <ngt-mesh-basic-material color="lightblue" />
    <ngts-edges [options]="{ threshold: 15, color: 'darkblue', lineWidth: 2 }" />
</ngt-mesh>

Scaled Edges

You can scale the edges slightly to create an outline effect:

<ngt-mesh>
    <ngt-icosahedron-geometry />
    <ngt-mesh-standard-material color="orange" />
    <ngts-edges [options]="{ scale: 1.05, threshold: 15, color: 'black', lineWidth: 3 }" />
</ngt-mesh>

Custom Geometry

You can provide a custom geometry instead of using the parent’s geometry:

<ngts-edges [options]="{ geometry: customGeometry, threshold: 10, color: 'white' }" />

Adjusting Threshold

The threshold option controls the angle (in degrees) at which edges are detected. Lower values show more edges, higher values show fewer:

<!-- Shows more edges (sharper angle detection) -->
<ngts-edges [options]="{ threshold: 5 }" />

<!-- Shows fewer edges (only very sharp angles) -->
<ngts-edges [options]="{ threshold: 30 }" />

Options

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

Properties

name	type	description
geometry	THREE.BufferGeometry	Geometry to use for the edges. If not provided, uses parent geometry.
threshold	number	Angle threshold in degrees for edge detection. Default: 15
lineWidth	number	Width of the edge lines. Default: 1
color	THREE.ColorRepresentation	Line color. Default: 0xffffff