import { Component , Input , Optional , SkipSelf } from '@angular/core' ; import * as THREE from 'three' ; import { RendererService } from '../../renderer/renderer.service' ; import { appliedMaterial , provideParent } from '../../util' ; import { fixCenter } from '../../util/fix-center' ; import { AbstractLazyObject3D } from '../abstract-lazy-object-3d' ; import { AbstractObject3D } from '../abstract-object-3d' ; import { FontService } from '../loader/services/font.service' ; @ Component ( { selector : 'atft-text-mesh' , providers : [ provideParent ( TextMeshComponent ) ] , template : '<ng-content></ng-content>' } ) export class TextMeshComponent extends AbstractLazyObject3D { @ Input ( ) material = 'basic' ; private _materialColor : string | number = '#DADADA' ; @ Input ( ) set materialColor ( materialColor ) { this . _materialColor = materialColor ; if ( this . object ) { this . startLoading ( ) ; } } get materialColor ( ) { return this . _materialColor ; } private _text = 'Text' ; @ Input ( ) set text ( text ) { this . _text = text ; if ( this . object ) { this . startLoading ( ) ; } } get text ( ) { return this . _text ; } @ Input ( ) size = 10 ; @ Input ( ) height = 0.3 ; @ Input ( ) curveSegments = 2 ; @ Input ( ) bevelEnabled = false ; @ Input ( ) bevelThickness = 0.1 ; @ Input ( ) bevelSize = 0.1 ; @ Input ( ) bevelOffset = 0 ; @ Input ( ) bevelSegments = 1 ; @ Input ( ) fontUrl = './assets/font/helvetiker_regular.typeface.json' ; @ Input ( ) castShadow = true ; @ Input ( ) receiveShadow = true ; @ Input ( ) depthWrite = true ; @ Input ( ) centered = true ; protected fontCache : THREE . Font ; constructor ( protected rendererService , @ SkipSelf ( ) @ Optional ( ) protected parent , protected font ) { super ( rendererService , parent ) ; } public getMaterial ( ) { return appliedMaterial ( this . materialColor , this . material , this . depthWrite ) ; } protected async loadLazyObject ( ) { const font = await this . font . load ( this . fontUrl ) ; return this . getTextMesh ( font ) ; } protected getTextMesh ( font ) { if ( this . text ) { const geometry = new THREE . TextGeometry ( this . text , { font : font , size : this . size , height : this . height , curveSegments : this . curveSegments , bevelEnabled : this . bevelEnabled , bevelThickness : this . bevelThickness , bevelSize : this . bevelSize , bevelOffset : this . bevelOffset , bevelSegments : this . bevelOffset } ) ; const material = this . getMaterial ( ) ; const mesh = new THREE . Mesh ( geometry , material ) ; mesh . castShadow = this . castShadow ; mesh . receiveShadow = this . receiveShadow ; if ( this . centered ) { fixCenter ( mesh ) ; } return mesh ; } else { return new THREE . Mesh ( ) ; } } }