Три. js PointerLockControls: «элементы управления не определены» и не работают

Question

Итак, я делаю свое первое приложение Three. js и хочу добавить вид от первого лица, поэтому я предположил, что PointerLockControls будет хорошим. Но я сталкиваюсь с проблемой, и я понимаю, что она не определена, даже если я ее определил. Вот мой код:

Итак, я сохранил PointerLockControls в ./src/PointerLockControls.js:

/**
 * @author mrdoob / http://mrdoob.com/
 * @author Mugen87 / https://github.com/Mugen87
 */

import { Euler, EventDispatcher, Vector3 } from './three.module.js';

var PointerLockControls = function(camera, domElement) {
    if (domElement === undefined) {
        console.warn('THREE.PointerLockControls: The second parameter "domElement" is now mandatory.');
        domElement = document.body;
    }

    this.domElement = domElement;
    this.isLocked = false;

    //
    // internals
    //

    var scope = this;

    var changeEvent = { type: 'change' };
    var lockEvent = { type: 'lock' };
    var unlockEvent = { type: 'unlock' };

    var euler = new Euler(0, 0, 0, 'YXZ');

    var PI_2 = Math.PI / 2;

    var vec = new Vector3();

    function onMouseMove(event) {
        if (scope.isLocked === false) return;

        var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
        var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;

        euler.setFromQuaternion(camera.quaternion);

        euler.y -= movementX * 0.002;
        euler.x -= movementY * 0.002;

        euler.x = Math.max(-PI_2, Math.min(PI_2, euler.x));

        camera.quaternion.setFromEuler(euler);

        scope.dispatchEvent(changeEvent);
    }

    function onPointerlockChange() {
        if (document.pointerLockElement === scope.domElement) {
            scope.dispatchEvent(lockEvent);

            scope.isLocked = true;
        } else {
            scope.dispatchEvent(unlockEvent);

            scope.isLocked = false;
        }
    }

    function onPointerlockError() {
        console.error('THREE.PointerLockControls: Unable to use Pointer Lock API');
    }

    this.connect = function() {
        document.addEventListener('mousemove', onMouseMove, false);
        document.addEventListener('pointerlockchange', onPointerlockChange, false);
        document.addEventListener('pointerlockerror', onPointerlockError, false);
    };

    this.disconnect = function() {
        document.removeEventListener('mousemove', onMouseMove, false);
        document.removeEventListener('pointerlockchange', onPointerlockChange, false);
        document.removeEventListener('pointerlockerror', onPointerlockError, false);
    };

    this.dispose = function() {
        this.disconnect();
    };

    this.getObject = function() {
        // retaining this method for backward compatibility

        return camera;
    };

    this.getDirection = (function() {
        var direction = new Vector3(0, 0, -1);

        return function(v) {
            return v.copy(direction).applyQuaternion(camera.quaternion);
        };
    })();

    this.moveForward = function(distance) {
        // move forward parallel to the xz-plane
        // assumes camera.up is y-up

        vec.setFromMatrixColumn(camera.matrix, 0);

        vec.crossVectors(camera.up, vec);

        camera.position.addScaledVector(vec, distance);
    };

    this.moveRight = function(distance) {
        vec.setFromMatrixColumn(camera.matrix, 0);

        camera.position.addScaledVector(vec, distance);
    };

    this.lock = function() {
        this.domElement.requestPointerLock();
    };

    this.unlock = function() {
        document.exitPointerLock();
    };

    this.connect();
};

PointerLockControls.prototype = Object.create(EventDispatcher.prototype);
PointerLockControls.prototype.constructor = PointerLockControls;

export { PointerLockControls };

Затем я добавил его в свой основной. js:

let scene, camera, renderer, cube, controls;
import { PointerLockControls } from './src/PointerLockControls.js';

function init() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    renderer = new THREE.WebGLRenderer({ antialias: true });
    controls = new PointerLockControls(camera, renderer.domElement);
    console.log(PointerLockControls);
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

    const geometry = new THREE.BoxGeometry(1, 1, 1); //const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    /*COLOR*/ /*TEXTURE*/ const texture = new THREE.TextureLoader().load('./img.jpg');
    const material = new THREE.MeshBasicMaterial({ map: texture });

    cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;
}

function animate() {
    requestAnimationFrame(animate);

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
}

function onResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

window.addEventListener('resize', onResize, false);
//controls.addEventListener('change', console.log('change'));

init();
animate();

Когда я пытаюсь console.log(controls) Он говорит controls is not defined. Пожалуйста, помогите!