无法解析 PointerLockControls 的所有参数

Question

I've started to learn three.js a couple of days ago and want to combine it with the framework Angular. Everything up to this point works fine, but the PointerLockControls service won't do properly.

Maybe I am missing something, but I am not sure what exactly.

I've installed three.js via NPM, thought I might also include this one.

I'll append my code with which I am currently experimenting.
Anything else is untouched, the app component is the only one with "custom" logic.

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

I'd appreciate any help!
If any information is missing, tell me, and I'll try to add it to this post asap.

Answer 1

Your component is created via Dependency injection .

PointerLockControls can't be in the constructor. You will need to create you instance youself.

Something like that:

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