OrbitControls在Angular2和Three.js中未定義

我無法讓我的Angular2應用程序中的OrbitControls工作。我成功地用盒子顯示場景，但是我無法移動相機。OrbitControls在Angular2和Three.js中未定義

我發現我的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(); 
    } 
}

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

我怎樣才能返回OrbitComponent對象？

來源

2017-08-11 Tony

指令和組件在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對象，攝像機燈光等。

不過最重要的事實是，這些建議：

讓你的渲染組件，而不是一個指令
訪問您的孩子與@ViewChild裝飾。在我的情況是一個SceneComponent，但它可以是你的任何東西。確保在渲染器組件模板中包含組件標籤選擇器。

我希望這會幫助你！

來源

2017-08-11 08:57:42

顯示場景適用於我，我無法將OrbitControlComponent注入到場景中。 – Tony

對不起，我遲到的答案。你能給我更多的信息嗎？該過程應該是相同的：在HTML中的標記和在SceneComponent ts文件中的@ViewChild。不要忘記在你的模塊中聲明你的OrbitControlComponent！ –

OrbitControls在Angular2和Three.js中未定義

回答

相關問題