Three.js替换OrbitControls为FirstPersonControls后场景异常的解决

各尝试场景的问题原因 #

• 全局Clock但物体消失：首次调用clock.getDelta()时，可能因页面加载到首次动画循环的间隔过长，获取到异常大的时间差。FirstPersonControls会根据这个超大delta计算相机移动，直接把相机移到3D文本的视野之外。
• Clock放在动画函数内部导致相机无法移动：每次循环新建Clock实例时，getDelta()返回0（新Clock没有时间差积累）。控制器接收delta为0时，不会执行任何移动逻辑，所以WASD/方向键完全失效；但相机保持初始位置，因此物体仍可见。
• 全局Clock恢复正常：全局Clock会持续追踪时间变化，每次getDelta()都能获取到两帧之间的真实时间差，控制器可以正确计算相机的移动和旋转量，同时相机初始位置未被异常修改，因此物体可见且交互正常。

正确实现FirstPersonControls的步骤 #

1. 确保控制器正确导入：Three.js r158及以后版本中，FirstPersonControls不在核心库内，需从examples/jsm/controls/FirstPersonControls.js导入（若使用旧版本核心库包含该控件则忽略）。
2. 全局声明核心变量：将controls和clock声明为全局变量，避免作用域问题。
3. 初始化控制器：在相机、场景、渲染器初始化完成后，创建控制器并配置参数：

   controls = new THREE.FirstPersonControls(camera, renderer.domElement);
   controls.movementSpeed = 150; // 移动速度
   controls.lookSpeed = 0.1; // 视角旋转速度
   // 可选配置：根据需求调整
   // controls.lookVertical = true; // 是否允许垂直视角旋转（默认开启）
   // controls.noFly = true; // 是否禁用飞行模式（默认关闭，关闭时可上下移动）
   // controls.limits = { maxPolarAngle: Math.PI / 2 }; // 限制垂直视角范围
   

4. 初始化全局Clock：

   const clock = new THREE.Clock();
   

5. 在动画循环中更新控制器：确保先更新控制器，再执行渲染和其他逻辑：

   function animate() {
     requestAnimationFrame(animate);
     // 获取两帧之间的时间差
     const delta = clock.getDelta();
     // 更新控制器状态
     controls.update(delta);
     // 执行你的3D文本闪烁逻辑
     // ...
     // 渲染场景
     renderer.render(scene, camera);
   }
   animate();
   

6. 可选优化：为避免首次delta过大导致相机瞬移，可在初始化控制器后立即调用一次clock.getDelta()重置时间：

   clock.getDelta();
   

内容的提问来源于stack exchange，提问作者john jacobs