three PointerLockControls 指针锁定控制器

PointerLockControls 是 Three.js 中的一个控制器类，它用于实现第一人称视角的指针锁定控制。使用该类，可以创建类似于第一人称射击游戏中的视角控制，用户可以通过鼠标移动来控制摄像机的视角方向，并且当鼠标点击页面后，指针会被锁定在窗口中，提供更加沉浸式的体验。
该类的实现是基于Pointer Lock API的。 对于第一人称3D游戏来说， PointerLockControls 是一个非常完美的选择。

需要注意的是只有当鼠标进入锁定状态时控制器才会生效，并且控制器只能控制机器转动与上下移动，但是可以通过 moveRight 进行左右移动 通过 moveForward 进行上下移动

PointerLockControls 有三个事件，三个属性，五个方法

PointerLockControls( camera : Camera, domElement : HTMLDOMElement ) camera: 渲染场景的摄像机。 domElement: 用于事件监听的HTML元素。 创建一个新的 PointerLockControls 实例。

事件

• change 当用户移动鼠标时触发。
• lock 当指针状态为 “locked” （即鼠标被捕获）时触发。
• unlock 当指针状态为 “unlocked” （即鼠标不再被捕获）时触发。

    const controls = new PointerLockControls( camera, renderer.domElement );
    renderer.domElement.addEventListener('click', () => {
        controls.lock();
    });
    controls.addEventListener( 'lock', function () {
        console.log("指针锁定");
    });
    controls.addEventListener( 'unlock', function () {
        console.log("指针解锁");
    });

属性

• isLocked : Boolean 控制器是否被锁定。
• maxPolarAngle : Float 摄像机的俯仰角上限限制。范围为0到Math.PI弧度之间。默认值为Math.PI。
• minPolarAngle : Float 摄像机的俯仰角下限限制。范围为0到Math.PI弧度之间。默认值为0。
• pointerSpeed : Float 指针移动对相机旋转的影响程度的乘数。默认值为1。

方法

• getDirection ( target : Vector3 ) : Vector3 target: 目标向量。 返回摄像机的观看方向。
• lock () : undefined 激活指针锁定。
• moveForward ( distance : Number ) : undefined distance: 距离（区分正负）。 平行于xz平面，向前移动摄像机。假定camera.up是y朝上。 相机上向移动

    // 创建一个立方体
    const geometry = new THREE.BoxGeometry(1, 1, 1); // 宽、高、深各为1
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 绿色材质
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube); // 添加立方体到场景
    const controls = new PointerLockControls( camera, renderer.domElement );
    renderer.domElement.addEventListener('click', () => {
        controls.lock(); // 锁定鼠标
    });
    controls.addEventListener( 'lock', function () {
        console.log("指针锁定");
    });
    controls.addEventListener( 'unlock', function () {
        console.log("指针解锁");
    });
    var i = 2;
    function animate() {
        requestAnimationFrame(animate);
        i += -0.1 // 为负数时 向 top 移动 为正数时向 bottom 移动
        controls.moveForward (i)
        renderer.render(scene, camera);
    }
    animate();

• moveRight ( distance : Number ) : undefined distance: 距离（区分正负）。 平行于xz平面，向侧面移动摄像机。相机向左右移动

    // 创建一个立方体
    const geometry = new THREE.BoxGeometry(1, 1, 1); // 宽、高、深各为1
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 绿色材质
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube); // 添加立方体到场景
    const controls = new PointerLockControls( camera, renderer.domElement );
    renderer.domElement.addEventListener('click', () => {
        controls.lock();
    });
    controls.addEventListener( 'lock', function () {
        console.log("指针锁定");
    });
    controls.addEventListener( 'unlock', function () {
        console.log("指针解锁");
    });
    var i = 2;
    function animate() {
        requestAnimationFrame(animate);
        i += -0.1 // 为负数时 向 right 移动 为正数时向 left 移动
        controls.moveRight (i)
        renderer.render(scene, camera);
    }
    animate();

• unlock () : undefined 退出指针锁定。