projects/atft/src/lib/control/map-controls.component.ts
OnChanges
OnDestroy
selector | atft-map-controls |
styleUrls | controls.component.scss |
template |
|
Properties |
|
Methods |
|
Inputs |
constructor(rendererService: RendererService, raycasterService: RaycasterService, animationService: AnimationService)
|
||||||||||||
Parameters :
|
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
|
|
Defined in
AbstractOrbitControls:22
|
|
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 |
ngOnChanges | ||||||
ngOnChanges(changes: SimpleChanges)
|
||||||
Inherited from
AbstractOrbitControls
|
||||||
Defined in
AbstractOrbitControls:42
|
||||||
Parameters :
Returns :
void
|
ngOnDestroy |
ngOnDestroy()
|
Inherited from
AbstractOrbitControls
|
Defined in
AbstractOrbitControls:97
|
Returns :
void
|
Protected setUpControls |
setUpControls()
|
Inherited from
AbstractOrbitControls
|
Defined in
AbstractOrbitControls:57
|
Returns :
void
|
Private configureListeners |
configureListeners()
|
Inherited from
AbstractOrbitControls
|
Defined in
AbstractOrbitControls:58
|
Returns :
void
|
ngAfterViewInit |
ngAfterViewInit()
|
Inherited from
AbstractOrbitControls
|
Defined in
AbstractOrbitControls:74
|
Returns :
void
|
Public reset |
reset()
|
Inherited from
AbstractOrbitControls
|
Defined in
AbstractOrbitControls:88
|
Returns :
void
|
Protected animation |
Type : Subscription
|
childCameras |
Type : QueryList<AbstractCamera<THREE.Camera>>
|
Decorators :
@ContentChildren(AbstractCamera, {descendants: true})
|
Inherited from
AbstractOrbitControls
|
Defined in
AbstractOrbitControls:13
|
Protected controls |
Type : T
|
Inherited from
AbstractOrbitControls
|
Defined in
AbstractOrbitControls:24
|
webGlRenderer |
Type : RendererCanvasComponent
|
Decorators :
@ContentChild(RendererCanvasComponent, {static: false})
|
Inherited from
AbstractOrbitControls
|
Defined in
AbstractOrbitControls:14
|
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%;
}