THREE.js pointerlock控件在鼠标移动时不移动相机

我试图在没有div的情况下跟踪源代码，但没有成功。然后我尝试在这里遵循代码，但它也不起作用

我只是希望能够通过pointerlock控件查看第一人称视图。之后，我将能够整理控制装置的移动

目前，我有一个模型（mainChar），相机附在他身上。我希望指针锁定控件以某种方式连接到他的位置

这是我的代码，不起作用：

    //IMPORT STATEMENTS

import { EntityManager } from './EntityManager.js';
import { LightingManager } from './LightingManager.js';
import { Time } from '../Time.js';
import { PauseMenu } from '../SceneSubjects/Menu/PauseMenu.js';
import { keyboardManager } from './KeyboardManager.js';

//lights
import { GeneralLights } from '../SceneSubjects/lighting/GeneralLights.js';
import { CeilingLight } from '../SceneSubjects/lighting/CeilingLight.js';
import { CeilingLightObj } from '../SceneSubjects/objects/CeilingLightObj.js';

//objects
import { House } from '../SceneSubjects/House.js';
import { SceneSubject } from '../SceneSubjects/objects/SceneSubject.js';
import { TestBlock } from '../SceneSubjects/characters/TestBlock.js';
import { Door } from '../SceneSubjects/objects/Door.js';
import { MainChar } from '../SceneSubjects/characters/MainChar.js';

//other
import { PointerLockControls } from '../../jsm/PointerLockControls.js';
import { OrbitControls } from '../../jsm/OrbitControls.js';
import * as THREE from '../../../jsm/three.module.js';
//==================================================================================================

//Global Variables

//lights
var generalLights = new GeneralLights();

//ceiling lights
var bedroomLightObj = new CeilingLightObj();
var kitchenLightObj = new CeilingLightObj();
var studyLightObj = new CeilingLightObj();
var hallwayLightObj1 = new CeilingLightObj();
var hallwayLightObj2 = new CeilingLightObj();
var bathroomLightObj = new CeilingLightObj();
var loungeLightObj = new CeilingLightObj();

var bedroomLight = new CeilingLight();
var kitchenLight = new CeilingLight();
var studyLight = new CeilingLight();
var hallwayLight1 = new CeilingLight();
var bathroomLight = new CeilingLight();
var hallwayLight2 = new CeilingLight();
var loungeLight = new CeilingLight();

//objects
var house = new House();
var sceneSubject = new SceneSubject();
var testBlock = new TestBlock();
var testdoor = new Door();

export var mainChar = new MainChar(testBlock);

export class SceneManager {

    constructor(canvas) {
        //this entire function renders a scene where you can add as many items as you want to it (e.g. we can create the house and add as
        //many items as we want to the house). It renders objects from other javascript files
        //------------------------------------------------------------------------------------------------------------------------------------------
        //These are supposed to act like constants. DO NOT CHANGE
        this.GAME_PAUSE = "pause";
        this.GAME_RUN = "run";
        this.GAME_START = "start";
        //------------------------------------------------------------------------------------------------------------------------------------------

        //we use (this) to make variables accessible in other classes
        this.time = new Time();
        this.objPauseMenu;



        this.game_state = this.GAME_RUN;

        this.width_screen = canvas.width;
        this.height_screen = canvas.height;

        this.screenDimensions = {
            width: canvas.width,
            height: canvas.height
        };

        //the essentials for rendering a scene
        this.scene = this.buildScene();
        this.renderer = this.buildRender(this.screenDimensions);
        this.camera = this.buildCamera(this.screenDimensions);


        //comment this out
        //  this.controls = new OrbitControls(this.camera, this.renderer.domElement);

        //initialise pointerlock controls
        this.pointerLockControls = new PointerLockControls(this.camera, this.renderer.domElement);
        this.pointerLockControls.unlock();

        //this.scene.add(this.pointerLockControls.getObject());
        //====================

        //adjust the ceiling light properties in the house
        this.setCeilingLightProperties();

        this.managers = this.createManagers();

        //load things to scene
        this.loadToScene(this.managers[0].lights);
        this.loadToScene(this.managers[1].entities);



        //---------------------------------------------------------------------------------------------------------------------------------
        // Ok, now we have the cube. Next we'll create the hud. For that we'll
        // need a separate scene which we'll render on top of our 3D scene. We'll
        // use a dynamic texture to render the HUD.


        // We will use 2D canvas element to render our HUD.  

        //---------------------------------------------------------------------------------------------------------------------------------

    }



    loadToScene(entities) {
        for (let i = 0; i < entities.length; i++) {

            this.scene.add(entities[i].object);

        }
    }
    //this function creates our scene
    buildScene() {
        //create a new scene
        const scene = new THREE.Scene();

        //set the scene's background-> in this case it is our skybox
        const loader = new THREE.CubeTextureLoader();
        //it uses different textures per face of cube
        const texture = loader.load([
            '../skybox/House/posx.jpg',
            '../skybox/House/negx.jpg',
            '../skybox/House/posy.jpg',
            '../skybox/House/negy.jpg',
            '../skybox/House/posz.jpg',
            '../skybox/House/negz.jpg'
        ]);
        scene.background = texture;

        //if we wanted it to be a colour, it would have been this commented code:
        //scene.background = new THREE.Color("#000");
        return scene;
    }

    //this creates a renderer for us
    buildRender({ width, height }) {

        const renderer = new THREE.WebGLRenderer({
            canvas: canvas,
            antialias: true, alpha: true
        });
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);

        return renderer;
    }

    //create a camera for the screen
    buildCamera({ width, height }) {

        //SETTING FIELD OF VIEW, ASPECT RATIO (which should generally be width/ height), NEAR AND FAR (anything outside near/ far is clipped)
        const aspectRatio = width / height;
        const fieldOfView = 60;
        const nearPlane = 1;
        const farPlane = 1000;

        //there are 2 types of cameras: orthographic and perspective- we will use perspective (more realistic)
        const camera = new THREE.PerspectiveCamera(fieldOfView, aspectRatio, nearPlane, farPlane);
        //Set camera initial position to main character
        let pos = mainChar.returnWorldPosition();
        camera.position.set(pos.x, pos.y + 10, pos.z - 10);

        return camera;
    }

    setCeilingLightProperties() {
        //set their light positions
        bedroomLightObj.setLightPosition(0, 21, 50);
        bedroomLight.setLightPosition(0, 16, 50);


        loungeLightObj.setLightPosition(-45, 21, -60);
        loungeLight.setLightPosition(-45, 16, -60);

        studyLightObj.setLightPosition(35, 21, -50);
        studyLight.setLightPosition(35, 16, -50);

        kitchenLight.setLightPosition(-45, 16, 5);
        kitchenLightObj.setLightPosition(-45, 21, 5);

        bathroomLight.setLightPosition(45, 16, 15);
        bathroomLightObj.setLightPosition(45, 21, 15);

        hallwayLightObj1.setLightPosition(0, 21, -60);
        hallwayLight1.setLightPosition(0, 16, -60);

        hallwayLightObj2.setLightPosition(0, 21, 0);
        hallwayLight2.setLightPosition(0, 16, 0);



    }

    //add subjects to the scene
    createManagers() {

        const managers = [new LightingManager(), new EntityManager()];
        //can be altered so we can add multiple entities, and depending on which position
        //it is, certain ones won't be paused, and some will be
        //Note that these variables are declared globally before the class definition
        /*This is so that we can use any of these object's methods or values later somewhere else*/

        //lights
        //  managers[0].register(generalLights);
        managers[0].register(bedroomLight);
        managers[0].register(loungeLight);
        managers[0].register(studyLight);
        managers[0].register(hallwayLight1);
        managers[0].register(hallwayLight2);
        managers[0].register(kitchenLight);
        managers[0].register(bathroomLight);


        //entities
        managers[1].register(loungeLightObj);
        managers[1].register(studyLightObj);
        managers[1].register(kitchenLightObj);
        managers[1].register(bathroomLightObj);
        managers[1].register(bedroomLightObj);
        managers[1].register(hallwayLightObj1);
        managers[1].register(hallwayLightObj2);




        managers[1].register(house);

        testdoor.setPosition(0, -0.5, 33);
        //testdoor.setRotation(-Math.PI/2);
        managers[1].register(testdoor);

        managers[1].register(mainChar);
        managers[1].register(sceneSubject);
        managers[1].register(testBlock);


        return managers;
    }

    updateCameraPosition() {
        //Match camera position and direction to the character's position and direction
        let pos = mainChar.returnWorldPosition();
        let dir = mainChar.returnObjectDirection();
        //Set y to 10 to move camera closer to head-height

        //UNCOMMENT FOR 3RD PERSON
        // this.camera.position.set(pos.x, 10 +10, pos.z + 20);
        // this.camera.rotation.set(dir.x - 0.5, dir.y, dir.z);

        //UNCOMMENT FOR FIRST PERSON
        this.camera.position.set(pos.x, 15, pos.z - 5);
        this.camera.rotation.set(dir.x, dir.y, dir.z);
    }

    //this updates the subject/model every frame
    update() {

        //won't call this loop if it's paused-> only for objects that need to be paused (managers that need to be paused)
        if (this.game_state == this.GAME_RUN) {

            

            //TO EXPERIMENT WITH FOR LOOKING AROUND!
            //  this.camera.position.x += ( keyboardManager.getMouseX() - this.camera.position.x ) ;
            //   this.camera.position.y += ( - keyboardManager.getMouseY() - this.camera.position.y );
            // this.camera.lookAt( this.scene.position );

            const runTime = this.time.getRunTime();
            this.managers[0].update(runTime);
            this.managers[1].update(runTime);
            //update orbit controls
            //comment out this.controls.update() 
            //this.controls.update();

            this.renderer.render(this.scene, this.camera);

        }
        else {

            //comment out
            // this.controls.update();

            this.renderer.autoClear = true;

            //render scene1
            this.renderer.render(this.scene, this.camera);

            //prevent canvas from being erased with next .render call
            this.renderer.autoClear = false;

            //just render scene2 on top of scene1
            this.renderer.render(this.objPauseMenu.scene, this.objPauseMenu.camera);



            // renderer.autoClear = true;

        }


        //update orbit controls
        //comment out
        //  this.controls.update();

        //uncomment this 
        this.updateCameraPosition();


    }

    //this resizes our game when screen size changed
    onWindowResize() {

        this.camera.aspect = window.innerWidth / window.innerHeight;
        this.camera.updateProjectionMatrix();

        this.renderer.setSize(window.innerWidth, window.innerHeight);

    }

    pause() { //when pause mode is entered. The pause menu needs to be rendered.
        this.game_state = this.GAME_PAUSE;
        this.time.pause();

        //comment out 
        // this.controls.enabled = false; // stop orbit controls from responding to use input


        this.objPauseMenu = new PauseMenu(this.width_screen, this.height_screen);




    }

    unpause() {
        this.game_state = this.GAME_RUN;
        this.time.unpause();

        //comment out
        // this.controls.enabled = true; // start orbit controls tp respond to input

    }



}

//导入语句
从“/EntityManager.js”导入{EntityManager}；
从“./LightingManager.js”导入{LightingManager}；
从“../Time.js”导入{Time}；
从“../SceneSubjects/Menu/PauseMenu.js”导入{PauseMenu}；
从“./keyboardManager.js”导入{keyboardManager}；
//灯光
从“../SceneSubjects/lighting/GeneralLights.js”导入{GeneralLights}；
从“../SceneSubjects/lighting/CeilingLight.js”导入{CeilingLight}；
从“../SceneSubjects/objects/CeilingLightObj.js”导入{CeilingLightObj}；
//物体
从“../SceneSubjects/House.js”导入{House}；
从“../SceneSubjects/objects/SceneSubject.js”导入{SceneSubject}；
从“../SceneSubjects/characters/TestBlock.js”导入{TestBlock}；
从“../SceneSubjects/objects/Door.js”导入{Door}；
从“../SceneSubjects/characters/MainChar.js”导入{MainChar}；
//其他
从“../../jsm/PointerLockControls.js”导入{PointerLockControls}；
从“../../jsm/OrbitControls.js”导入{OrbitControls}；
从“../../jsm/THREE.module.js”导入*为三；
//==================================================================================================
//全局变量
//灯光
var generalLights=新的generalLights（）；
//顶灯
var beddroomlightobj=新天花板lightobj（）；
var kitchenLightObj=新天花板lightobj（）；
var studyLightObj=new-CeilingLightObj（）；
var hallwayLightObj1=新天花板lightobj（）；
var hallwayLightObj2=新天花板lightobj（）；
var bathroomLightObj=新天花板lightobj（）；
var loungeLightObj=新天花板lightobj（）；
var beddroomlight=新天花板灯（）；
var kitchenLight=新天花板灯（）；
var studyLight=新天花板灯（）；
var hallwayLight1=新天花板灯（）；
var bathroomLight=新天花板灯（）；
var hallwayLight2=新天花板灯（）；
var loungeLight=新天花板灯（）；
//物体
var house=新房子（）；
var sceneSubject=新sceneSubject（）；
var testBlock=新的testBlock（）；
var testdoor=新门（）；
export var mainChar=新mainChar（测试块）；
导出类场景管理器{
构造器（画布）{
//这个完整的功能渲染一个场景，您可以在其中添加任意数量的项目（例如，我们可以创建房屋并添加为
//它呈现来自其他javascript文件的对象
//------------------------------------------------------------------------------------------------------------------------------------------
//这些应该像常量一样，不要改变
这个游戏名为PAUSE=“PAUSE”；
这个.GAME_RUN=“RUN”；
这个游戏名为“开始”；
//------------------------------------------------------------------------------------------------------------------------------------------
//我们使用（这个）使变量可以在其他类中访问
this.time=新时间（）；
this.objPauseMenu；
this.game\u state=this.game\u RUN；
this.width_screen=canvas.width；
this.height_screen=canvas.height；
此屏幕尺寸={
宽度：canvas.width，
高度：canvas.height
};
//渲染场景的基本要素
this.scene=this.buildScene（）；
this.renderer=this.buildRender（this.screenDimensions）；
this.camera=this.buildCamera（this.screenDimensions）；
//评论一下
//this.controls=新的轨道控件（this.camera、this.renderer.doElement）；
//初始化指针锁定控件
this.pointerLockControls=新的pointerLockControls（this.camera、this.renderer.doElement）；
this.pointerLockControls.unlock（）；
//this.scene.add（this.pointerLockControls.getObject（））；
//====================
//调整房屋中的天花板灯光属性
此参数为.setCeilingLightProperties（）；
this.managers=this.createManagers（）；
//把东西放到现场
this.loadToScene（this.managers[0].lights）；
this.loadToScene（this.managers[1].entities）；
//---------------------------------------------------------------------------------------------------------------------------------
//好的，现在我们有了立方体。接下来我们将创建hud。为此，我们将
//需要一个单独的场景，我们将在3D场景上渲染。我们将
//使用动态纹理渲染HUD。
//我们将使用2D画布元素渲染HUD。
//---------------------------------------------------------------------------------------------------------------------------------
}
loadToScene（实体）{
for（设i=0；i在本例中，它是我们的skybox
const loader=new THREE.CubeTextureLoader（）；
//它在立方体的每个面上使用不同的纹理
const texture=loader.load([
“../skybox/House/posx.jpg”，
“../skybox/House/negx.jpg”，
“../skybox/House/posy.jpg”，
“../skybox/House/negy.jpg”，
“../skybox/House/posz.jpg”，
“../skybox/House/negz.jpg”
]);
scene.background=纹理；
//如果我们想让它成为一种颜色，它就会