有没有办法在THREE.JS中使用PointerLock控件来限制相机的旋转角度？

// 引入THREE.JS库和PointerLock控件
import * as THREE from 'three';
import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls';

// 创建相机对象
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 0);

// 创建场景对象
const scene = new THREE.Scene();

// 将相机添加到场景中
scene.add(camera);

// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建控制器对象
const controls = new PointerLockControls(camera, renderer.domElement);

// 更新函数
function update() {
  // 获取鼠标的移动量
  const movementX = controls.getMovementX();
  const movementY = controls.getMovementY();

  // 将移动量应用于相机的旋转
  camera.rotation.y -= movementX * 0.002;
  camera.rotation.x -= movementY * 0.002;

  // 检查相机的旋转角度是否超出限制范围
  const maxRotationX = Math.PI / 2; // 最大旋转角度为90度
  const minRotationX = -Math.PI / 2; // 最小旋转角度为-90度
  camera.rotation.x = Math.max(minRotationX, Math.min(maxRotationX, camera.rotation.x));
}

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  update();
  renderer.render(scene, camera);
}

// 监听鼠标点击事件，当点击时锁定鼠标
document.addEventListener('click', () => {
  controls.lock();
});

// 监听鼠标移动事件，当鼠标锁定时更新控制器
document.addEventListener('mousemove', (event) => {
  if (controls.isLocked) {
    controls.update(event);
  }
});

// 开始动画循环
animate();