Angular2和Three.js中未定义的OrbitControls

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

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对象？

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. 使渲染器成为组件而不是指令
2. 使用@ViewChild装饰器访问您的孩子。 在我的情况下是一个SceneComponent，但它可以是您自己的任何东西。 确保在渲染器组件模板中包括组件标签选择器。

希望对您有所帮助！