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.

CodePudding user response：

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