Empecé a aprender three.js hace un par de días y quiero combinarlo con el marco Angular. Todo hasta este punto funciona bien, pero el servicio PointerLockControls no funcionará correctamente.

Tal vez me estoy perdiendo algo, pero no estoy seguro de qué exactamente.

Instalé three.js a través de NPM, pensé que también podría incluir este.

Agregaré mi código con el que estoy experimentando actualmente.
Todo lo demás está intacto, el componente de la aplicación es el único con lógica "personalizada".

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

¡Agradecería cualquier ayuda!
Si falta alguna información, dígame e intentaré agregarla a esta publicación lo antes posible.