javascript - OrbitControls 在 Angular2 和 Three.js 中未定义

Question

我无法让 OrbitControls 在我的 Angular2 应用程序中工作。我成功地显示了一个带有盒子的场景，但我无法移动相机。

我发现我的 OrbitComponent(定义轨道控件)返回一个未定义值。

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

渲染器.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 装饰器访问您的 child 。在我的例子中是一个 SceneComponent，但它可以是你的任何组件。确保在渲染器组件模板中包含组件标签选择器。

希望这对你有帮助!