I recently delved into learning three.js and have been looking to integrate it with Angular framework. Everything seems to be running smoothly so far, except for the issue I'm facing with the PointerLockControls service.
It appears that I might be overlooking something crucial, but I can't pinpoint exactly what it is.
I've gone ahead and installed three.js via NPM just to cover all bases.
Below is the snippet of code I am currently tinkering with.
The app component is where most of the specialized logic resides.
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();
}
}
If you have any insights or solutions, please share them!
If there are any details missing, feel free to point them out so I can update this post promptly.