File

projects/atft/src/lib/control/map-controls.component.ts

Extends

AbstractOrbitControls

Implements

OnChanges OnDestroy

Metadata

Index

Properties
Methods
Inputs

Constructor

constructor(rendererService: RendererService, raycasterService: RaycasterService, animationService: AnimationService)
Parameters :
Name Type Optional
rendererService RendererService No
raycasterService RaycasterService No
animationService AnimationService No

Inputs

autoRotate
Type : boolean
Default value : false
autoRotateSpeed
Type : number
Default value : 0.5
dampingFactor
Type : number
Default value : 0.1
enableDamping
Type : boolean
Default value : false
maxDistance
Type : number
Default value : 200
maxPolarAngle
Type : number
Default value : Math.PI / 2 - 0.1
maxZoom
Type : any
Default value : Infinity
minDistance
Type : number
Default value : 20
minZoom
Type : number
Default value : 0
panSpeed
Type : number
Default value : 1.2
rotateSpeed
Type : number
Default value : 1.0
screenSpacePanning
Type : boolean
Default value : false
zoomSpeed
Type : number
Default value : 1.2
listeningControlElement
Type : ElementRef
Inherited from AbstractOrbitControls

The element on whose native element the orbit control will listen for mouse events.

Note that keyboard events are still listened for on the global window object, this is a known issue from Three.js: https://github.com/mrdoob/three.js/pull/10315

Methods

ngOnChanges
ngOnChanges(changes: SimpleChanges)
Inherited from AbstractOrbitControls
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
ngOnDestroy
ngOnDestroy()
Inherited from AbstractOrbitControls
Returns : void
Protected setUpControls
setUpControls()
Inherited from AbstractOrbitControls
Returns : void
Private configureListeners
configureListeners()
Inherited from AbstractOrbitControls
Returns : void
ngAfterViewInit
ngAfterViewInit()
Inherited from AbstractOrbitControls
Returns : void
Public reset
reset()
Inherited from AbstractOrbitControls
Returns : void

Properties

Protected animation
Type : Subscription
childCameras
Type : QueryList<AbstractCamera<THREE.Camera>>
Decorators :
@ContentChildren(AbstractCamera, {descendants: true})
Inherited from AbstractOrbitControls
Protected controls
Type : T
Inherited from AbstractOrbitControls
webGlRenderer
Type : RendererCanvasComponent
Decorators :
@ContentChild(RendererCanvasComponent, {static: false})
Inherited from AbstractOrbitControls
import {Component, Input, OnChanges, OnDestroy, SimpleChanges} from '@angular/core';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
import {RendererService} from '../renderer/renderer.service';
import {AnimationService} from '../animation/animation.service';
import {RaycasterService} from '../raycaster/raycaster.service';
import {AbstractOrbitControls} from './abstract-orbit-controls';
import {Subscription} from 'rxjs';
import {MapControls} from "three/examples/jsm/controls/MapControls";

@Component({
  selector: 'atft-map-controls',
  template: `
    <ng-content></ng-content>`,
  styleUrls: ['controls.component.scss']
})
export class MapControlsComponent extends AbstractOrbitControls<OrbitControls> implements OnChanges, OnDestroy {

  @Input() rotateSpeed = 1.0;
  @Input() zoomSpeed = 1.2;
  @Input() autoRotate = false;
  @Input() autoRotateSpeed = 0.5;
  @Input() enableDamping = false;
  @Input() dampingFactor = 0.1;
  @Input() screenSpacePanning = false;
  @Input() minDistance = 20;
  @Input() maxDistance = 200;
  @Input() maxPolarAngle: number = Math.PI / 2 - 0.1;
  @Input() panSpeed = 1.2;
  @Input() minZoom = 0;
  @Input() maxZoom = Infinity;

  protected animation!: Subscription;

  constructor(
    protected override rendererService: RendererService,
    protected override raycasterService: RaycasterService,
    protected animationService: AnimationService
  ) {
    super(rendererService, raycasterService);
  }

  override ngOnChanges(changes: SimpleChanges) {
    if (!this.controls) {
      return;
    }
    super.ngOnChanges(changes);

    if (changes['rotateSpeed']) {
      this.controls.rotateSpeed = this.rotateSpeed;
    }
    if (changes['zoomSpeed']) {
      this.controls.zoomSpeed = this.zoomSpeed;
    }
    // TODO: add others
  }

  protected setUpControls() {
    this.controls = new MapControls(
      this.childCameras.first.camera,
      this.listeningControlElement && this.listeningControlElement.nativeElement
    );
    this.controls.rotateSpeed = this.rotateSpeed;
    this.controls.zoomSpeed = this.zoomSpeed;

    this.controls.panSpeed = this.panSpeed;

    this.controls.autoRotate = this.autoRotate;
    this.controls.autoRotateSpeed = this.autoRotateSpeed;
    this.controls.enableDamping = this.enableDamping;
    this.controls.dampingFactor = this.dampingFactor;

    this.controls.screenSpacePanning = this.screenSpacePanning;
    this.controls.minDistance = this.minDistance;
    this.controls.maxDistance = this.maxDistance;
    this.controls.maxPolarAngle = this.maxPolarAngle;

    this.controls.minZoom = this.minZoom;
    this.controls.maxZoom = this.maxZoom;

    this.controls.update();

    // Advanced animationService:
    if (this.autoRotate || this.enableDamping) {

      this.animation = this.animationService.animate.subscribe(() => {
        this.controls.update();
      });
      this.controls.addEventListener('change', () => {
        this.rendererService.render();
      });
      this.animationService.start();
    }

    this.rendererService.render();
  }

  override ngOnDestroy() {
    super.ngOnDestroy();
    this.animation?.unsubscribe();
  }


}

controls.component.scss

:host {
  display: flex;
  flex: 1;
  height: 100%;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""