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

File

projects/atft/src/lib/actor/data-center/layer/grid-actor.component.ts

Extends

AbstractEmptyDirective

Metadata

providers provideParent(GridActorComponent)
selector atft-grid-actor
template 
<atft-grid-mesh #grid [size]="size" [iterationsX]="iterationsX" [iterationsY]="iterationsY" [offset]="offset"
                (click)="onMouseClick($event)"
                (mouseEnter)="onMouseEnter($event)"
                (mouseExit)="onDeselected()"
                [materialColor]="color"
                atft-raycaster-group
></atft-grid-mesh>

Index

Properties
Methods
Inputs
Outputs

Inputs

iterationsX
Type : number
Default value : 20
Defined in projects/atft/src/lib/actor/data-center/layer/grid-actor.component.ts:27
iterationsY
Type : number
Default value : 20
Defined in projects/atft/src/lib/actor/data-center/layer/grid-actor.component.ts:28
offset
Type : number
Default value : 1.05
Defined in projects/atft/src/lib/actor/data-center/layer/grid-actor.component.ts:29
size
Type : number
Default value : 5
Defined in projects/atft/src/lib/actor/data-center/layer/grid-actor.component.ts:26
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

deselected
Type : EventEmitter
Defined in projects/atft/src/lib/actor/data-center/layer/grid-actor.component.ts:33
gridClick
Type : EventEmitter
Defined in projects/atft/src/lib/actor/data-center/layer/grid-actor.component.ts:34
gridEnter
Type : EventEmitter
Defined in projects/atft/src/lib/actor/data-center/layer/grid-actor.component.ts:32
render
Type : EventEmitter
Defined in projects/atft/src/lib/actor/data-center/layer/grid-actor.component.ts:31
changed
Type : EventEmitter
Inherited from AbstractObject3D
Defined in AbstractObject3D:44

Methods

Protected getLinePosition
getLinePosition(event: RaycasterEmitEvent)
Defined in projects/atft/src/lib/actor/data-center/layer/grid-actor.component.ts:56
Parameters :
Name Type Optional
event RaycasterEmitEvent No
Returns : THREE.BufferAttribute | null
Public onDeselected
onDeselected()
Defined in projects/atft/src/lib/actor/data-center/layer/grid-actor.component.ts:83
Returns : void
Public onMouseClick
onMouseClick(event: RaycasterEmitEvent)
Defined in projects/atft/src/lib/actor/data-center/layer/grid-actor.component.ts:47
Parameters :
Name Type Optional
event RaycasterEmitEvent No
Returns : void
Public onMouseEnter
onMouseEnter(event: RaycasterEmitEvent)
Defined in projects/atft/src/lib/actor/data-center/layer/grid-actor.component.ts:39
Parameters :
Name Type Optional
event RaycasterEmitEvent No
Returns : void
Protected newObject3DInstance
newObject3DInstance()
Inherited from AbstractObject3D
Defined in AbstractObject3D:8
Returns : THREE.Object3D
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 ngOnChanges
ngOnChanges(changes: SimpleChanges)
Inherited from AbstractObject3D
Defined in AbstractObject3D:57
Parameters :
Name Type Optional
changes SimpleChanges No
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

color
Type : string | number
Default value : '#A0A0A0'
Defined in projects/atft/src/lib/actor/data-center/layer/grid-actor.component.ts:37
grid
Type : GridMeshComponent
Decorators :
@ViewChild('grid', {static: true})
Defined in projects/atft/src/lib/actor/data-center/layer/grid-actor.component.ts:24
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, EventEmitter, Input, Output, ViewChild} from '@angular/core';
import {provideParent} from '../../../util';
import { AbstractEmptyDirective, GridMeshComponent } from '../../../object';
import * as THREE from 'three';
import {RaycasterEmitEvent} from '../../../raycaster';


@Component({
  selector: 'atft-grid-actor',
  providers: [provideParent(GridActorComponent)],
  template: `
    <atft-grid-mesh #grid [size]="size" [iterationsX]="iterationsX" [iterationsY]="iterationsY" [offset]="offset"
                    (click)="onMouseClick($event)"
                    (mouseEnter)="onMouseEnter($event)"
                    (mouseExit)="onDeselected()"
                    [materialColor]="color"
                    atft-raycaster-group
    ></atft-grid-mesh>
  `
})
export class GridActorComponent extends AbstractEmptyDirective {

  @ViewChild('grid', {static: true})
  grid!: GridMeshComponent;

  @Input() size = 5;
  @Input() iterationsX = 20;
  @Input() iterationsY = 20;
  @Input() offset = 1.05;

  @Output() render = new EventEmitter<void>();
  @Output() gridEnter = new EventEmitter<THREE.BufferAttribute>();
  @Output() deselected = new EventEmitter<void>();
  @Output() gridClick = new EventEmitter<THREE.BufferAttribute>();


  color: string | number = '#A0A0A0';

  public onMouseEnter(event: RaycasterEmitEvent) {
    // console.log('selected', event);
    const pos = this.getLinePosition(event);
    if (pos) {
      this.gridEnter.emit(pos);
    }
  }

  public onMouseClick(event: RaycasterEmitEvent) {
    // console.log('GridActorComponent.onMouseClick');
    const pos = this.getLinePosition(event);
    if (pos) {
      // console.log('GridActorComponent.onMouseClick position', pos);
      this.gridClick.emit(pos);
    }
  }

  protected getLinePosition(event: RaycasterEmitEvent): THREE.BufferAttribute | null {
    if (event.face) {
      // console.log('Finding coordinates for face', event.face);

      const geo: any = this.grid.getObject().geometry;
      const meshPosition: THREE.BufferAttribute = geo.attributes.position;


      const geometry = new THREE.BufferGeometry();
      geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(4 * 3), 3));
      const line = new THREE.Line(geometry, new THREE.LineBasicMaterial({color: 0xffffff, transparent: true}));

      const linePosition: any = line.geometry.attributes['position'];

      // console.log('Looking geometry positions', meshPosition);
      linePosition.copyAt(0, meshPosition, event.face.a);
      linePosition.copyAt(1, meshPosition, event.face.b);
      linePosition.copyAt(2, meshPosition, event.face.c);
      linePosition.copyAt(3, meshPosition, event.face.a);

      // console.log('linePosition', linePosition);
      return linePosition;
    } else {
      return null;
    }
  }

  public onDeselected() {
    // console.log('deselected');
  }


}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""