NgtsRoundedBox

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

scene-graph.ts

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

@Component({
    selector: 'app-scene-graph',
    template: `
        <ngts-rounded-box [options]="{ args: [1.5, 1.5, 1.5], radius: 0.1, smoothness: 4 }">
            <ngt-mesh-standard-material color="#ff6b6b" [metalness]="0.5" [roughness]="0.3" />
        </ngts-rounded-box>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtsRoundedBox],
})
export class SceneGraph {}

NgtsRoundedBox is a port of Drei’s RoundedBox which renders a box with rounded edges. Creates smooth, beveled corners on all edges of the box.

Usage

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

<ngts-rounded-box [options]="{ width: 2, height: 1, depth: 1, radius: 0.1 }">
    <ngt-mesh-standard-material color="orange" />
</ngts-rounded-box>

Custom Material

NgtsRoundedBox accepts custom material(s) via content projection.

<ngts-rounded-box [options]="{ width: 1.5, height: 1.5, depth: 1.5, radius: 0.2, smoothness: 8 }">
    <ngt-mesh-physical-material [metalness]="0.5" [roughness]="0.3" color="gold" />
</ngts-rounded-box>

Options

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

Properties

name	type	description
width	number	Width of the box (X-axis). Default: 1
height	number	Height of the box (Y-axis). Default: 1
depth	number	Depth of the box (Z-axis). Default: 1
radius	number	Radius of the rounded corners. Default: 0.05
smoothness	number	Number of curve segments for corner smoothness. Default: 4
bevelSegments	number	Number of bevel segments. Default: 4
steps	number	Number of extrusion steps. Default: 1
creaseAngle	number	Angle threshold for creased normals calculation (radians). Default: 0.4