File

projects/atft/src/lib/object/text/text-mesh.component.ts

Extends

AbstractLazyObject3D

Metadata

Index

Properties
Methods
Inputs
Outputs
Accessors

Constructor

constructor(rendererService: RendererService, parent: AbstractObject3D<any>, font: FontService)
Parameters :
Name Type Optional
rendererService RendererService No
parent AbstractObject3D<any> No
font FontService No

Inputs

bevelEnabled
Type : boolean
Default value : false
bevelOffset
Type : number
Default value : 0
bevelSegments
Type : number
Default value : 1
bevelSize
Type : number
Default value : 0.1
bevelThickness
Type : number
Default value : 0.1
castShadow
Type : boolean
Default value : true
centered
Type : boolean
Default value : true
curveSegments
Type : number
Default value : 2
depthWrite
Type : boolean
Default value : true
fontUrl
Type : string
Default value : './assets/font/helvetiker_regular.typeface.json'
height
Type : number
Default value : 0.3
material
Type : string
Default value : 'basic'
materialColor
Type : string | number
receiveShadow
Type : boolean
Default value : true
size
Type : number
Default value : 10
text
Type : string
layer
Type : number
Default value : 0
Inherited from AbstractObject3D
name
Type : string
Default value : uuidv4()
Inherited from AbstractObject3D
rotateX
Type : number
Inherited from AbstractObject3D

Rotation in Euler angles (radians) with order X, Y, Z.

rotateY
Type : number
Inherited from AbstractObject3D
rotateZ
Type : number
Inherited from AbstractObject3D
scaleX
Type : number
Default value : 1
Inherited from AbstractObject3D
scaleY
Type : number
Default value : 1
Inherited from AbstractObject3D
scaleZ
Type : number
Default value : 1
Inherited from AbstractObject3D
translateX
Type : number
Inherited from AbstractObject3D

Translate the geometry. This is typically done as a one time operation, and not during a loop.

translateY
Type : number
Inherited from AbstractObject3D
translateZ
Type : number
Inherited from AbstractObject3D

Outputs

changed
Type : EventEmitter
Inherited from AbstractObject3D

Methods

Public getMaterial
getMaterial()
Returns : THREE.Material
Protected getTextMesh
getTextMesh(font: Font)
Parameters :
Name Type Optional
font Font No
Returns : THREE.Mesh
Protected Async loadLazyObject
loadLazyObject()
Inherited from AbstractLazyObject3D
Returns : Promise<THREE.Object3D>
Protected afterInit
afterInit()
Inherited from AbstractObject3D
Returns : void
Protected newObject3DInstance
newObject3DInstance()
Inherited from AbstractObject3D
Returns : THREE.Object3D
ngOnDestroy
ngOnDestroy()
Inherited from AbstractObject3D
Returns : void
Protected startLoading
startLoading()
Inherited from AbstractLazyObject3D
Returns : void
Public addChild
addChild(object: AbstractObject3D<any>)
Inherited from AbstractObject3D
Parameters :
Name Type Optional
object AbstractObject3D<any> No
Returns : void
Public applyRotation
applyRotation()
Inherited from AbstractObject3D
Returns : void
Public applyScale
applyScale()
Inherited from AbstractObject3D
Returns : void
Public applyTranslation
applyTranslation()
Inherited from AbstractObject3D
Returns : void
Public findByName
findByName(name: string)
Inherited from AbstractObject3D
Parameters :
Name Type Optional
name string No
Returns : any
Public getChildren
getChildren()
Inherited from AbstractObject3D
Public getObject
getObject()
Inherited from AbstractObject3D
Returns : T
Public ngAfterViewInit
ngAfterViewInit()
Inherited from AbstractObject3D
Returns : void
Public ngOnChanges
ngOnChanges(changes: SimpleChanges)
Inherited from AbstractObject3D
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
Public ngOnInit
ngOnInit()
Inherited from AbstractObject3D
Returns : void
Protected recursionByName
recursionByName(currentNode: AbstractObject3D<any>, name: string)
Inherited from AbstractObject3D
Parameters :
Name Type Optional
currentNode AbstractObject3D<any> No
name string No
Returns : any
Public removeChild
removeChild(object: AbstractObject3D<any>)
Inherited from AbstractObject3D
Parameters :
Name Type Optional
object AbstractObject3D<any> No
Returns : void
Public removeChildByName
removeChildByName(name: string)
Inherited from AbstractObject3D
Parameters :
Name Type Optional
name string No
Returns : void
Public updateParent
updateParent()
Inherited from AbstractObject3D
Returns : void

Properties

Private _materialColor
Type : string | number
Default value : '#DADADA'
Private _text
Type : string
Default value : 'Text'
Protected lazyObject
Type : THREE.Object3D | undefined
Inherited from AbstractLazyObject3D

This is reference to lazy loaded Object3D (async after init)

Private parentInitialized
Default value : false
Inherited from AbstractLazyObject3D

Flag to signal whether the parentScene class instance AbstractObject3D called the overwritten method AbstractModelLoader yet.

Unless that method was called, no methods and properties of AbstractObject3D may be safely accessed, especially AbstractObject3D and AbstractObject3D.renderer.

Protected childlren
Type : Array<AbstractObject3D<any>>
Default value : []
Inherited from AbstractObject3D
Protected object
Type : T
Inherited from AbstractObject3D

Accessors

materialColor
getmaterialColor()
setmaterialColor(materialColor: string | number)
Parameters :
Name Type Optional
materialColor string | number No
Returns : void
text
gettext()
settext(text: string)
Parameters :
Name Type Optional
text string No
Returns : void
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';
import {Font} from "three/examples/jsm/loaders/FontLoader.js";
import {TextGeometry} from "three/examples/jsm/geometries/TextGeometry";

@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: string | number) {
    this._materialColor = materialColor;
    if (this.object) {
      // console.log('TextMeshComponent.set materialColor', materialColor + ' / ' + this.name);
      this.startLoading();
    }
  }

  get materialColor() {
    return this._materialColor;
  }

  private _text = 'Text';
  @Input()
  set text(text: string) {
    this._text = text;
    if (this.object) {
      // console.log('TextMeshComponent.set text', text + ' / ' + this.name);
      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;

  constructor(
    protected override rendererService: RendererService,
    @SkipSelf() @Optional() protected override parent: AbstractObject3D<any>,
    protected font: FontService
  ) {
    super(rendererService, parent);
  }

  public getMaterial(): THREE.Material {
    return appliedMaterial(this.materialColor, this.material, this.depthWrite);
  }

  protected async loadLazyObject(): Promise<THREE.Object3D> {
    // console.log('TextMeshComponent.loadLazyObject', this.name);

    const font = await this.font.load(this.fontUrl);
    // console.log('TextMeshComponent.loadLazyObject font', font);
    return this.getTextMesh(font);
  }

  protected getTextMesh(font: Font): THREE.Mesh {
    // console.log('TextMeshComponent.getTextMesh', this.text + ' / ' + this.name);
    if (this.text) {
      const geometry = new 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();
    }

  }


}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""