如何实现点击HTML按钮后启动Three.js相机连续移动动画

核心思路 #

通过一个状态变量控制相机的移动逻辑是否执行，点击按钮后激活该状态，在Three.js的渲染循环中根据状态判断是否持续移动相机。

具体实现步骤 #

• 声明状态开关：在全局或渲染逻辑的作用域内定义一个变量，用于标记相机是否处于移动状态

  let isCameraMoving = false;
  

• 绑定按钮点击事件：给begin-animation按钮添加点击事件，点击时激活移动状态

  document.getElementById('begin-animation').addEventListener('click', () => {
    isCameraMoving = true;
  });
  

• 修改渲染循环逻辑：在原有的animation函数中，加入状态判断，当开关激活时执行相机移动

  function animation() {
    requestAnimationFrame(animation);
  
    // 保留你原有的立方体旋转逻辑
    cubes.forEach(cube => {
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
    });
  
    // 根据状态判断是否移动相机
    if (isCameraMoving) {
      camera.position.x -= 0.1; // 可调整数值控制移动速度，越小越平缓
    }
  
    renderer.render(scene, camera);
  }
  // 初始化启动渲染循环
  animation();
  

可选扩展：添加停止功能 #

如果需要随时停止相机移动，可以新增一个按钮并绑定停止逻辑：

document.getElementById('stop-animation').addEventListener('click', () => {
  isCameraMoving = false;
});

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