angular-template-for-threejs documentation
  1. Components
  2. FrameMeshComponent

File

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

Extends

AbstractMesh

Implements

OnChanges

Metadata

providers provideParent(FrameMeshComponent)
selector atft-frame-mesh
template 
<ng-content></ng-content>

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(rendererService: RendererService, parent: AbstractObject3D<any>)
Defined in projects/atft/src/lib/object/mesh/frame-mesh.component.ts:22
Parameters :
Name Type Optional
rendererService RendererService No
parent AbstractObject3D<any> No

Inputs

sizeX
Type : number
Default value : 20
Defined in projects/atft/src/lib/object/mesh/frame-mesh.component.ts:19
sizeY
Type : number
Default value : 20
Defined in projects/atft/src/lib/object/mesh/frame-mesh.component.ts:22
thickness
Type : number
Default value : 2
Defined in projects/atft/src/lib/object/mesh/frame-mesh.component.ts:16
castShadow
Type : boolean
Default value : true
Inherited from AbstractMesh
Defined in AbstractMesh:16
depthWrite
Type : boolean
Default value : true
Inherited from AbstractMesh
Defined in AbstractMesh:22
material
Type : string
Inherited from AbstractMesh
Defined in AbstractMesh:10
materialColor
Type : string | number
Default value : '#5DADE2'
Inherited from AbstractMesh
Defined in AbstractMesh:13
receiveShadow
Type : boolean
Default value : true
Inherited from AbstractMesh
Defined in AbstractMesh:19
layer
Type : number
Default value : 0
Inherited from AbstractObject3D
Defined in AbstractObject3D:42
name
Type : string
Default value : uuidv4()
Inherited from AbstractObject3D
Defined in AbstractObject3D:40
rotateX
Type : number
Inherited from AbstractObject3D
Defined in AbstractObject3D:24

Rotation in Euler angles (radians) with order X, Y, Z.
rotateY
Type : number
Inherited from AbstractObject3D
Defined in AbstractObject3D:25
rotateZ
Type : number
Inherited from AbstractObject3D
Defined in AbstractObject3D:26
scaleX
Type : number
Default value : 1
Inherited from AbstractObject3D
Defined in AbstractObject3D:36
scaleY
Type : number
Default value : 1
Inherited from AbstractObject3D
Defined in AbstractObject3D:37
scaleZ
Type : number
Default value : 1
Inherited from AbstractObject3D
Defined in AbstractObject3D:38
translateX
Type : number
Inherited from AbstractObject3D
Defined in AbstractObject3D:31

Translate the geometry. This is typically done as a one time operation, and not during a loop.
translateY
Type : number
Inherited from AbstractObject3D
Defined in AbstractObject3D:32
translateZ
Type : number
Inherited from AbstractObject3D
Defined in AbstractObject3D:33

Outputs

changed
Type : EventEmitter
Inherited from AbstractObject3D
Defined in AbstractObject3D:44

Methods

Protected getGeometry
getGeometry()
Defined in projects/atft/src/lib/object/mesh/frame-mesh.component.ts:31
Returns : THREE.ShapeGeometry
Protected newObject3DInstance
newObject3DInstance()
Inherited from AbstractObject3D
Defined in AbstractObject3D:58
Returns : THREE.Mesh
Public ngOnChanges
ngOnChanges(changes: SimpleChanges)
Inherited from AbstractObject3D
Defined in AbstractObject3D:67
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
Public applyMaterial
applyMaterial()
Inherited from AbstractMesh
Defined in AbstractMesh:50
Returns : void
Protected applyShadowProps
applyShadowProps(mesh: THREE.Mesh)
Inherited from AbstractMesh
Defined in AbstractMesh:28
Parameters :
Name Type Optional
mesh THREE.Mesh No
Returns : void
Protected getMaterial
getMaterial()
Inherited from AbstractMesh
Defined in AbstractMesh:24
Returns : THREE.Material
Public addChild
addChild(object: AbstractObject3D<any>)
Inherited from AbstractObject3D
Defined in AbstractObject3D:143
Parameters :
Name Type Optional
object AbstractObject3D<any> No
Returns : void
Protected afterInit
afterInit()
Inherited from AbstractObject3D
Defined in AbstractObject3D:156
Returns : void
Public applyRotation
applyRotation()
Inherited from AbstractObject3D
Defined in AbstractObject3D:118
Returns : void
Public applyScale
applyScale()
Inherited from AbstractObject3D
Defined in AbstractObject3D:135
Returns : void
Public applyTranslation
applyTranslation()
Inherited from AbstractObject3D
Defined in AbstractObject3D:127
Returns : void
Public findByName
findByName(name: string)
Inherited from AbstractObject3D
Defined in AbstractObject3D:185
Parameters :
Name Type Optional
name string No
Returns : any
Public getChildren
getChildren()
Inherited from AbstractObject3D
Defined in AbstractObject3D:202
Returns : Array<AbstractObject3D<any>>
Public getObject
getObject()
Inherited from AbstractObject3D
Defined in AbstractObject3D:175
Returns : T
Public ngAfterViewInit
ngAfterViewInit()
Inherited from AbstractObject3D
Defined in AbstractObject3D:181
Returns : void
Public ngOnDestroy
ngOnDestroy()
Inherited from AbstractObject3D
Defined in AbstractObject3D:86
Returns : void
Public ngOnInit
ngOnInit()
Inherited from AbstractObject3D
Defined in AbstractObject3D:97
Returns : void
Protected recursionByName
recursionByName(currentNode: AbstractObject3D<any>, name: string)
Inherited from AbstractObject3D
Defined in AbstractObject3D:192
Parameters :
Name Type Optional
currentNode AbstractObject3D<any> No
name string No
Returns : any
Public removeChild
removeChild(object: AbstractObject3D<any>)
Inherited from AbstractObject3D
Defined in AbstractObject3D:160
Parameters :
Name Type Optional
object AbstractObject3D<any> No
Returns : void
Public removeChildByName
removeChildByName(name: string)
Inherited from AbstractObject3D
Defined in AbstractObject3D:206
Parameters :
Name Type Optional
name string No
Returns : void
Public updateParent
updateParent()
Inherited from AbstractObject3D
Defined in AbstractObject3D:111
Returns : void

Properties

Protected childlren
Type : Array<AbstractObject3D<any>>
Default value : []
Inherited from AbstractObject3D
Defined in AbstractObject3D:46
Protected object
Type : T
Inherited from AbstractObject3D
Defined in AbstractObject3D:48 
import {Component, Input, OnChanges, Optional, SimpleChanges, SkipSelf} from '@angular/core';
import * as THREE from 'three';
import {RendererService} from '../../renderer/renderer.service';
import {provideParent} from '../../util';
import {AbstractObject3D} from '../abstract-object-3d';
import {AbstractMesh} from './abstract-mesh-3d';

@Component({
  selector: 'atft-frame-mesh',
  providers: [provideParent(FrameMeshComponent)],
  template: '<ng-content></ng-content>'
})
export class FrameMeshComponent extends AbstractMesh implements OnChanges {

  @Input()
  thickness = 2;

  @Input()
  sizeX = 20;

  @Input()
  sizeY = 20;

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

  protected getGeometry(): THREE.ShapeGeometry {
    // console.log('FrameMeshComponent.getGeometry', this.sizeX, this.sizeY, this.thickness);

    const halfX = (this.sizeX ?? 1) / 2.0;
    const halfY = (this.sizeY ?? 1) / 2.0;
    const t = this.thickness ?? 1;

    const shape = new THREE.Shape();

    shape.moveTo(-halfX, halfY);
    shape.lineTo(-halfX - t, halfY + t);
    shape.lineTo(halfX + t, halfY + t);

    shape.lineTo(halfX + t, -halfY - t);
    shape.lineTo(-halfX - t, -halfY - t);
    shape.lineTo(-halfX - t, halfY + t);

    shape.lineTo(-halfX, halfY);
    shape.lineTo(-halfX, -halfY);
    shape.lineTo(halfX, -halfY);
    shape.lineTo(halfX, halfY);
    shape.lineTo(-halfX, halfY);

    const geometry = new THREE.ShapeGeometry(shape);
    return geometry;
  }

  protected newObject3DInstance(): THREE.Mesh {
    const material = this.getMaterial();
    const mesh = new THREE.Mesh(this.getGeometry(), material);

    this.applyShadowProps(mesh);
    return mesh;
  }


  public override ngOnChanges(changes: SimpleChanges) {
    // console.log('FrameMeshComponent.ngOnChanges', this.name);
    if (!this.object) {
      return;
    }
    super.ngOnChanges(changes);

    let modified = false;

    if (['sizeX', 'sizeY', 'thickness'].some(propName => propName in changes)) {
      if (this.getObject() instanceof THREE.Mesh) {
        const mesh: THREE.Mesh = this.getObject();

        if (mesh.geometry instanceof THREE.ShapeGeometry) {
          const currentGeometry: THREE.ShapeGeometry = mesh.geometry;
          const newGeometry = this.getGeometry();
          currentGeometry.attributes = newGeometry.attributes;
        }
        modified = true;
      }

    }

    if (modified) {
      this.changed.emit();
      this.rendererService.render();
    }

  }

}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""