NgtsText3D

Preview

Credits: Text3D Alignment

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-soba-text-3d',
    template: `
        <ngt-canvas orthographic [camera]="{ position: [0, 0, 100], zoom: 100 }">
            <app-soba-wrapper *canvasContent [controls]="null" [lights]="false">
                <app-scene-graph />
            </app-soba-wrapper>
        </ngt-canvas>
    `,
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtCanvas, SceneGraph, SobaWrapper],
})
export default class Text3D {
    static clientProviders = [provideNgtRenderer()];
}

scene-graph.ts

import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { injectStore } from 'angular-three';
import { NgtsText3D } from 'angular-three-soba/abstractions';
import { NgtsOrbitControls } from 'angular-three-soba/controls';
import { NgtsCenter } from 'angular-three-soba/staging';

import interBoldJson from '@common-assets/inter_bold.json';

@Component({
    selector: 'app-scene-graph',
    template: `
        <ngt-ambient-light [intensity]="Math.PI * 0.5" />
        <ngt-directional-light [intensity]="Math.PI" [position]="10" />

        <ngts-center
            [options]="{
                bottom: true,
                right: true,
                position: [-viewportWidth() / 2 + 0.5, viewportHeight() / 2 - 0.5, 0],
            }"
        >
            <ngts-text-3d text="top left" [font]="interBoldJson" [options]="{ letterSpacing: -0.06, size: 0.5 }">
                <ngt-mesh-standard-material />
            </ngts-text-3d>
        </ngts-center>

        <ngts-center
            [options]="{
                top: true,
                left: true,
                position: [viewportWidth() / 2 - 0.5, -viewportHeight() / 2 + 0.5, 0],
            }"
        >
            <ngts-text-3d text="bottom right" [font]="interBoldJson" [options]="{ letterSpacing: -0.06, size: 0.5 }">
                <ngt-mesh-standard-material />
            </ngts-text-3d>
        </ngts-center>

        <ngts-center [options]="{ rotation: [-0.5, -0.25, 0] }">
            <ngts-text-3d
                text="angular"
                [font]="interBoldJson"
                [options]="{
                    curveSegments: 32,
                    bevelEnabled: true,
                    bevelSize: 0.04,
                    bevelThickness: 0.1,
                    height: 0.5,
                    lineHeight: 0.5,
                    letterSpacing: -0.06,
                    size: 1.5,
                }"
            >
                <ngt-mesh-normal-material />
            </ngts-text-3d>
        </ngts-center>

        <ngt-axes-helper [scale]="2" />
        <ngts-orbit-controls
            [options]="{ enableZoom: false, minPolarAngle: Math.PI / 2, maxPolarAngle: Math.PI / 2 }"
        />
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtsOrbitControls, NgtsCenter, NgtsText3D],
})
export class SceneGraph {
    protected readonly Math = Math;
    protected readonly interBoldJson = interBoldJson;

    private store = injectStore();
    protected viewportWidth = this.store.viewport.width;
    protected viewportHeight = this.store.viewport.height;
}

NgtsText3D renders 3D text using TextGeometry

Usage

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

<ngts-text-3d text="hello\nworld" [font]="fontUrl" />

Custom Material

NgtsText3D can accept custom material(s) via content projection.

<ngts-text-3d text="hello world" [font]="fontUrl">
    <ngt-mesh-basic-material [color]="color()" />
</ngts-text-3d>

Alignment

You can align NgtsText3D by wrapping it with NgtsCenter component.

<ngts-center [options]="{ top: true, left: true }">
    <ngts-text-3d text="hello\nworld" [font]="fontUrl" />
</ngts-center>

Inputs

name	type	description	required
text	string	text to render	yes
font	string	url of the font	yes

Options

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

Properties

name	type	description
bevelSegments	number	The number of vertical/horizontal segments that make up each glyph's rectangular plane. Default: 4
smooth	number	Merges vertices with a tolerance and calls computeVertexNormals()