Мышь в THREE.js

Question

Контекст: Я хочу реализовать камеру FPS.Итак, во-первых, я хочу начать с того, чтобы заставить указатель работать, чтобы иметь возможность просмотра мышью, прежде чем реализовывать движение с помощью клавиатуры.

Метод: Я пытаюсь сделать это аналогичнос этим примером в этот шаблонный стартовый проект three.js

Мой основной код:

import * as THREE from 'three'
import {PointerLockControls} from 'three-full'
import OrbitControls from 'orbit-controls-es6'
 
import vert from './shaders/shader.vert'
import frag from './shaders/shader.frag'
 
// Initial HMR Setup
if (module.hot) {
    module.hot.accept()
 
    module.hot.dispose(() => {
        document.querySelector('canvas').remove()
        renderer.forceContextLoss()
        renderer.context = null
        renderer.domElement = null
        renderer = null
        cancelAnimationFrame(animationId)
        removeEventListener('resize', resize)
    })
}
 
// Three Scene
let scene, camera, renderer, animationId, controls
let geometry, material, mesh
let controlsEnabled = false;
 
getPointerLock();
init();
animate();
 
function init() {
 
    // scene setup
    scene = new THREE.Scene()
    camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        1,
        10000
    )
    //camera.position.set(0, 1000, 3000)
 
    // controls setup
    //controls = new OrbitControls(camera)
    controls = new PointerLockControls(camera)    
    scene.add(controls.getObject());
 
    // grid floor creation
    geometry = new THREE.PlaneGeometry( 2000, 2000, 16 , 16);
    material = new THREE.MeshBasicMaterial( {color: 0xffffff, side: THREE.DoubleSide, wireframe: true} );
    var plane = new THREE.Mesh( geometry, material );
    plane.rotateX( - Math.PI / 2); 
    scene.add( plane );  
 
 
    // cube creation
    geometry = new THREE.BoxGeometry( 500, 500, 500 );
    material = new THREE.MeshBasicMaterial( {color: 0x00ffff, wireframe: true} );
    var cube = new THREE.Mesh( geometry, material );
    cube.position.set(0, 1000, -100)
    scene.add( cube );
 
 
 
    renderer = new THREE.WebGLRenderer({ antialias: true })
    renderer.setSize(window.innerWidth, window.innerHeight)
 
    document.body.appendChild(renderer.domElement)
}
 
function animate() {
    animationId = requestAnimationFrame(animate)
    renderer.render(scene, camera)
    //console.log(camera.position)
}
 
 
function getPointerLock() {
  document.onclick = function () {
    document.body.requestPointerLock();
  }
  document.addEventListener('pointerlockchange', lockChange, false);
}
 
function lockChange() {
    // Turn on controls
    if (document.pointerLockElement === document.body) {
       
        console.log('Lock done')
        controls.enabled = true;
    // Turn off the controls
    } else {
     
        console.log('Lock undone')
        controls.enabled = false;
    }
}
 
// Event listeners
function resize() {
    camera.aspect = innerWidth / innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(innerWidth, innerHeight)
}
 
addEventListener('resize', resize)

Код модуля Pointerlock:

import { Object3D } from '../core/Object3D.js'
import { Vector3 } from '../math/Vector3.js'
import { Euler } from '../math/Euler.js'
 
var PointerLockControls = function ( camera ) {
 
    var scope = this;
 
    camera.rotation.set( 0, 0, 0 );
 
    var pitchObject = new Object3D();
    pitchObject.add( camera );
 
    var yawObject = new Object3D();
    yawObject.position.y = 10;
    yawObject.add( pitchObject );
 
    var PI_2 = Math.PI / 2;
 
    var onMouseMove = function ( event ) {
 
        if ( scope.enabled === false ) return;
 
        var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
        var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
 
        yawObject.rotation.y -= movementX * 0.002;
        pitchObject.rotation.x -= movementY * 0.002;
 
        pitchObject.rotation.x = Math.max( - PI_2, Math.min( PI_2, pitchObject.rotation.x ) );
 
    };
 
    this.dispose = function () {
 
        document.removeEventListener( 'mousemove', onMouseMove, false );
 
    };
 
    document.addEventListener( 'mousemove', onMouseMove, false );
 
    this.enabled = false;
 
    this.getObject = function () {
 
        return yawObject;
 
    }; 
 
    this.getDirection = function () {
 
        // assumes the camera itself is not rotated
 
        var direction = new Vector3( 0, 0, - 1 );
        var rotation = new Euler( 0, 0, 0, 'YXZ' );
 
        return function ( v ) {
 
            rotation.set( pitchObject.rotation.x, yawObject.rotation.y, 0 );
 
            v.copy( direction ).applyEuler( rotation );
 
            return v;
 
        };
 
    }();
 
};
 
export { PointerLockControls }

Проблема: Приведенный выше код обеспечивает работу захвата мыши / блокировки указателя, но движение камеры при перемещении мыши отсутствует.Есть идеи, почему это так?