OrbitControls Angular2とThree.jsで定義されていません

Question

Angular2アプリケーションで動作するOrbitControlsを取得できません。私はボックスでシーンを表示するのに成功しましたが、カメラを動かすことができません。

OrbitComponent（軌道制御を定義する）がundefinedの値を返していることがわかりました。

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(); 
    } 
} 

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(); 
    } 
} 

renderer.component.tsはどうすればOrbitComponentオブジェクトを返すことができますか？

Answer 1

Angular2ではディレクティブとコンポーネントはほとんど同じですが、違いがあります。

私にとっては、テンプレートを使用してレンダラーをコンポーネントとして扱う方が簡単です。これにより、属性に関する注釈を使用しているときにネストされた要素にアクセスできるようになります。

ここでは、レンダラのサンプルがあります。ここでは

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 
} 

を私はレンダラの直接の子としてSceneComponentを設定します。 SceneComponentはTHREE.sceneオブジェクト、カメラのライトなどを処理します。

それにもかかわらず、最も重要な事実は、これらの提案です：

1. が@ViewChildデコレータとあなたの子供にあなたのレンダラコンポーネントの代わりに、指令
2. アクセスしてください。私の場合は、SceneComponentですが、あなたの中には何でも構いません。コンポーネントタグセレクタをレンダラーコンポーネントテンプレートに含めてください。

私はこれがあなたを助けてくれることを願っています！