OrbitControls in Angular2 und Three.js nicht definiert

Question

Ich kann OrbitControls nicht in meiner Angular2-Anwendung verwenden. Es ist mir gelungen, eine Szene mit einer Box anzuzeigen, aber ich kann die Kamera nicht bewegen.

Ich entdeckte, dass meine OrbitComponent (die Orbit-Steuerelemente definiert) einen undefined Wert zurückgibt.

orbit.component.ts

import { Directive, Input } from '@angular/core'; 

import * as THREE from 'three'; 
import { OrbitControls } from 'three-orbit-controls'; 

@Directive({ selector: 'three-orbit-controls' }) 
export class OrbitControlsComponent { 

    @Input() enabled: boolean = true; 

    controls: OrbitControls; 

    ngOnInit() { 
     console.log("hello"); 
    } 

    setupControls(camera, renderer) { 
     this.controls = new OrbitControls(camera, renderer.domElement); 
     this.controls.enabled = this.enabled; 
    } 

    updateControls(scene, camera) { 
     this.controls.update(); 
    } 
} 

renderer.component.ts

import { Directive, ElementRef, Input, ContentChild, ViewChild } from '@angular/core'; 
import * as THREE from 'three'; 

import { OrbitControlsComponent } from './controls/orbit.component'; 

@Directive({ selector: 'three-renderer' }) 
export class RendererComponent { 

    @ContentChild(OrbitControlsComponent) orbitComponent: OrbitControlsComponent; 

    constructor(private element: ElementRef) { } 

    ngAfterContentInit() { 
     console.log("orbitComponent undefined?", this.orbitComponent === undefined); 
     // TODO: OrbitControls is NULL! 
     if (this.orbitComponent) { 
      this.orbitComponent.setupControls(this.camera, this.renderer); 
     } 

     this.render(); 
    } 
} 

Wie kann ich wieder ein OrbitComponent Objekt?

Answer 1

Richtlinien und Komponenten sind in Angular2 fast identisch, aber sie haben Unterschiede.

Für mich ist einfacher, den Renderer als Komponente zu behandeln, mit einer Vorlage. Dadurch können Sie auf Ihre verschachtelten Elemente zugreifen, während Sie versuchen, Anmerkungen zu Attributen zu machen.

Hier haben Sie eine Probe des Renderers:

declare var THREE: any; 

@Component({ 
    selector: 'app-three-renderer', 
    template: ` 
    <app-three-scene 
    [renderer]="renderer"> 
    </app-three-scene> 
    ` 
}) 
export class RendererComponent implements OnChanges, AfterViewInit { 

    @Input() height: number; 
    @Input() width: number; 
    @ViewChild(SceneComponent) sceneComp: SceneComponent; 

    renderer: THREE.WebGLRenderer = new THREE.WebGLRenderer({}); 

    // ... other stuff 
} 

Hier stelle ich die eine SceneComponent als direkter Nachkomme des Renderers. Die SceneComponent behandelt das THREE.scene-Objekt, die Kameras leuchtet und so weiter.

Dennoch sind die wichtigsten Fakten sind diese Vorschläge:

1. Machen Sie Ihre Renderer eine Komponente anstelle einer Richtlinie
2. Zugang zu Ihrem Kind mit dem @ViewChild Dekorateur. In meinem Fall ist eine SceneComponent, aber es kann was auch immer in dir sein. Stellen Sie sicher, dass der Komponenten-Tag-Selektor in der Renderer-Komponentenvorlage enthalten ist.

Ich hoffe, das würde Ihnen helfen!