import { AfterViewInit , Component , Input , OnChanges , OnDestroy , Optional , SimpleChanges , SkipSelf } from '@angular/core' ; import { RendererService } from '../renderer/renderer.service' ; import { SceneComponent } from '../object' ; import * as THREE from 'three' ; @ Component ( { selector : 'atft-fog' , template : '' } ) export class FogComponent implements AfterViewInit , OnDestroy , OnChanges { @ Input ( ) color : string | number = '#0000AA' ; @ Input ( ) near = 10 ; @ Input ( ) far = 100 ; protected scene : THREE . Scene ; constructor ( protected rendererService , @ SkipSelf ( ) @ Optional ( ) protected parent ) { } public ngAfterViewInit ( ) { if ( this . parent && this . parent . getObject ( ) && this . parent . getObject ( ) . isScene ) { this . scene = this . parent . getObject ( ) ; this . enableFog ( ) ; } } protected enableFog ( ) { this . scene . fog = new THREE . Fog ( this . color , this . near , this . far ) ; this . rendererService . render ( ) ; } protected disableFog ( ) { this . scene . fog = undefined ; this . rendererService . render ( ) ; } ngOnDestroy ( ) { this . disableFog ( ) ; } public ngOnChanges ( changes ) { if ( ! this . scene ) { return ; } if ( [ 'color' , 'near' , 'far' ] . some ( propName => propName in changes ) ) { this . enableFog ( ) ; } } }