无法解析PointerLockControls的所有参数

Question

几天前，我已经开始学习three.js，并希望将它与框架角度结合起来。到目前为止，一切都很好，但是PointerLockControls服务不能正常工作。

也许我错过了什么，但我不知道到底是什么。

我已经通过NPM安装了three.js，我想我也可能包括这个。

我将附加我目前正在试验的代码。

任何其他东西都是不动的，应用程序组件是唯一一个具有“自定义”逻辑的组件。

import {Component, Inject, OnInit} from '@angular/core';
import * as THREE from 'three';
import {BufferGeometry, Material, Object3D, PerspectiveCamera, Scene, WebGLRenderer} from 'three';
import {WINDOW} from '@typescript/window-injection.token';
import {DOCUMENT} from '@angular/common';
import {PointerLockControls} from 'three/examples/jsm/controls/PointerLockControls';

export const STYLESHEETS_SRC: string = '../stylesheets/css/';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [STYLESHEETS_SRC + 'app.component.min.css'],
  providers: [Scene, PerspectiveCamera, WebGLRenderer, PointerLockControls]
})
export class AppComponent implements OnInit {
  private sensitivity: number = .02;

  constructor(
    @Inject(DOCUMENT) private document: Document,
    @Inject(WINDOW) private window: Window,
    private scene: Scene = new THREE.Scene(),
    private camera: PerspectiveCamera = new THREE.PerspectiveCamera(),
    private renderer: WebGLRenderer = new THREE.WebGLRenderer(),
    private pointerLock: PointerLockControls
  ) {
    camera.fov = 75;
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.near = .1;
    camera.far = 1000;
    camera.position.z = 5;

    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    renderer.domElement.addEventListener('mousemove', event => {
      if (event.button == 0) {
        camera.position.y -= event.movementY * this.sensitivity;
        camera.position.x += event.movementX * this.sensitivity;
      } else if (event.button == 2) {
        camera.quaternion.y -= event.movementX * this.sensitivity / 10;
        camera.quaternion.x += event.movementY * this.sensitivity / 10;
      }
    });

    this.pointerLock = new PointerLockControls(camera, renderer.domElement);
    pointerLock.lock();

    scene.add(new THREE.AxesHelper(5));
  }

  ngOnInit() {
    let geometry: BufferGeometry = new THREE.BoxGeometry(1, 1, 1);
    let material: Material = new THREE.MeshBasicMaterial({color: 0x00ff00});
    let cube: Object3D = new THREE.Mesh(geometry, material);
    this.scene.add(cube);

    let animate = () => {
      requestAnimationFrame(animate);

      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;

      this.renderer.render(this.scene, this.camera);
    };

    animate();
  }
}

我很感谢你的帮助！

如果缺少任何信息，请告诉我，我会尽快将其添加到这个帖子中。

Answer 1

组件是通过依赖注入创建的。

PointerLockControls不能在构造函数中。您需要自己创建实例。

就像这样：

const controls = new PointerLockControls( camera, document.body );