NgtsPrismGeometry

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

scene-graph.ts

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

@Component({
    selector: 'app-scene-graph',
    template: `
        <!-- Triangular prism -->
        <ngt-mesh [position]="[-2, 0, 0]">
            <ngts-prism-geometry [vertices]="triangleVertices" [options]="{ height: 1.5 }" />
            <ngt-mesh-standard-material color="#ff6b6b" />
        </ngt-mesh>

        <!-- Square prism (rectangular column) -->
        <ngt-mesh [position]="[0, 0, 0]">
            <ngts-prism-geometry [vertices]="squareVertices" [options]="{ height: 1.5 }" />
            <ngt-mesh-standard-material color="#4ecdc4" />
        </ngt-mesh>

        <!-- Hexagonal prism -->
        <ngt-mesh [position]="[2, 0, 0]">
            <ngts-prism-geometry [vertices]="hexagonVertices" [options]="{ height: 1.5 }" />
            <ngt-mesh-standard-material color="#a29bfe" />
        </ngt-mesh>

        <!-- Pentagon prism -->
        <ngt-mesh [position]="[0, 0, -2.5]">
            <ngts-prism-geometry [vertices]="pentagonVertices" [options]="{ height: 1 }" />
            <ngt-mesh-standard-material color="#ffeaa7" />
        </ngt-mesh>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtsPrismGeometry],
})
export class SceneGraph {
    // Triangle vertices
    triangleVertices: [number, number][] = [
        [0, 0.8],
        [-0.7, -0.5],
        [0.7, -0.5],
    ];

    // Square vertices
    squareVertices: [number, number][] = [
        [-0.5, 0.5],
        [0.5, 0.5],
        [0.5, -0.5],
        [-0.5, -0.5],
    ];

    // Hexagon vertices
    hexagonVertices: [number, number][] = Array.from({ length: 6 }, (_, i) => {
        const angle = (i / 6) * Math.PI * 2 - Math.PI / 2;
        return [Math.cos(angle) * 0.6, Math.sin(angle) * 0.6] as [number, number];
    });

    // Pentagon vertices
    pentagonVertices: [number, number][] = Array.from({ length: 5 }, (_, i) => {
        const angle = (i / 5) * Math.PI * 2 - Math.PI / 2;
        return [Math.cos(angle) * 0.8, Math.sin(angle) * 0.8] as [number, number];
    });
}

NgtsPrismGeometry abstracts THREE.ExtrudeGeometry to create a prism geometry from a 2D shape.

Usage

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

<ngt-mesh>
    <ngts-prism-geometry [vertices]="[[0, 0], [1, 0], [0.5, 1]]" [options]="{ height: 2 }" />
    <ngt-mesh-standard-material color="purple" />
</ngt-mesh>

Triangle Prism

Create a simple triangular prism:

<ngt-mesh>
    <ngts-prism-geometry
        [vertices]="[[0, 0], [2, 0], [1, 1.732]]"
        [options]="{ height: 3 }"
    />
    <ngt-mesh-standard-material color="coral" />
</ngt-mesh>

Rectangular Prism

Create a rectangular prism:

<ngt-mesh>
    <ngts-prism-geometry
        [vertices]="[[0, 0], [2, 0], [2, 1], [0, 1]]"
        [options]="{ height: 1.5 }"
    />
    <ngt-mesh-standard-material color="teal" />
</ngt-mesh>

With Bevel

Add bevel to the prism edges:

<ngt-mesh>
    <ngts-prism-geometry
        [vertices]="[[0, 0], [1, 0], [1, 1], [0, 1]]"
        [options]="{ height: 1, bevelEnabled: true, bevelThickness: 0.1, bevelSize: 0.1, bevelSegments: 3 }"
    />
    <ngt-mesh-standard-material color="gold" />
</ngt-mesh>

Custom Polygon

Create a prism from any polygon shape:

<ngt-mesh>
    <!-- Hexagon base -->
    <ngts-prism-geometry
        [vertices]="[
            [1, 0],
            [0.5, 0.866],
            [-0.5, 0.866],
            [-1, 0],
            [-0.5, -0.866],
            [0.5, -0.866]
        ]"
        [options]="{ height: 0.5 }"
    />
    <ngt-mesh-standard-material color="skyblue" />
</ngt-mesh>

Inputs

name	type	description	required
vertices	Array<[number, number]>	Array of 2D vertices defining the base shape.	yes
attach	NgtAttachable	Defines how the geometry attaches to its parent. Default: 'geometry'	no

Options

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

Properties

name	type	description
height	number	Height of the prism extrusion. Default: 1
bevelEnabled	boolean	Enable bevel. Default: false
steps	number	Number of points used for subdividing segments along the depth of the extruded spline.
bevelThickness	number	How deep into the original shape the bevel goes.
bevelSize	number	Distance from the shape outline that the bevel extends.
bevelOffset	number	Distance from the shape outline that the bevel starts.
bevelSegments	number	Number of bevel layers.
curveSegments	number	Number of points on the curves.