THREE.Clock

THREE.Clock 是 Three.js 中的一个实用类，用于跟踪和管理时间。它主要用于计算两帧之间的时间差（delta time），这在实现动画、物理模拟或其他需要基于时间的平滑运动时非常有用。

基本用法

以下是 THREE.Clock 的基本使用方法：

// 创建一个时钟实例，自动开始计时
const clock = new THREE.Clock();

// 在动画循环中使用
function animate() {
  // 获取自上次调用以来的时间差（秒）
  const delta = clock.getDelta();
  
  // 使用 delta 更新动画
  mesh.rotation.x += 0.5 * delta; // 每秒旋转0.5弧度
  
  // 渲染场景
  renderer.render(scene, camera);
  
  // 继续动画循环
  requestAnimationFrame(animate);
}

animate();

主要方法和属性

1. getDelta()
   • 返回自上次调用此方法以来的时间差（秒）。
   • 首次调用时返回 0，并开始计时。
2. getElapsedTime()
   • 返回从时钟创建或重置后经过的总时间（秒）。
3. start()
   • 启动或恢复时钟计时。
4. stop()
   • 暂停时钟计时。
5. reset()
   • 重置时钟，将经过的时间设为 0，并重新开始计时。

常见应用场景

1. 平滑动画：确保动画速度不依赖于帧率，在不同性能的设备上表现一致。
2. 物理模拟：为物理引擎提供精确的时间步长。
3. 定时事件：基于实际时间触发特定事件。

示例：使用 Clock 控制动画速度

下面是一个完整的示例，展示如何使用 THREE.Clock 确保物体以恒定速度旋转，无论帧率如何：

// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
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 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

// 创建时钟
const clock = new THREE.Clock();

// 动画循环
function animate() {
  // 获取时间差
  const delta = clock.getDelta();
  
  // 使用 delta 控制旋转速度（每秒旋转0.5弧度）
  cube.rotation.x += 0.5 * delta;
  cube.rotation.y += 0.5 * delta;
  
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

animate();

参考：https://www.doubao.com/chat/10207188211278082