Three.js摄像机视点间平滑过渡仅生效一次问题咨询

• 动画冲突：每次触发新的视点切换时，未终止之前正在运行的GSAP动画，多个动画同时作用于camera.position导致属性突变，看起来没有过渡效果
• 硬编码逻辑：9个按钮重复编写相同逻辑，不仅冗余，也容易出现每个按钮绑定的center变量作用域错误，导致视点偏移
• 固定参数问题：当前代码只计算了单个立方体的包围盒中心，切换到其他视点时没有动态更新目标坐标和看向的中心值

1. 配置化统一管理视点参数 #

把9个视点对应的目标位置、绑定的立方体对象提前存在数组里，避免重复代码

// 提前定义所有视点配置，index对应按钮的自定义属性，自行补全剩余8个配置
const viewPoints = [
  // 第一个视点示例，对应左上立方体
  {
    targetCube: cube1, // 对应视点绑定的立方体
    camPos: {x: 0, y: 0, z: 0} // 该视点下相机的目标位置
  },
  // 第二个视点示例，对应右上立方体
  {
    targetCube: cube2,
    camPos: {x: 10, y: 0, z: 0}
  }
  // ... 剩余7个视点按实际需求补充
]

2. 批量绑定按钮事件，每次切换前终止旧动画 #

给所有切换按钮增加data-view-id自定义属性，属性值为对应viewPoints的索引，批量绑定事件：

// 假设所有切换按钮的统一类名为view-btn
document.querySelectorAll('.view-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const viewId = parseInt(btn.dataset.viewId)
    const config = viewPoints[viewId]
    // 先杀掉当前camera.position上正在运行的GSAP动画，避免多动画冲突
    gsap.killTweensOf(camera.position)
    // 动态计算当前目标立方体的中心
    const aabb = new THREE.Box3().setFromObject(config.targetCube)
    const center = aabb.getCenter(new THREE.Vector3())
    // 启动新动画，默认从相机当前位置开始过渡
    gsap.to(camera.position, {
      duration: 1,
      x: config.camPos.x,
      y: config.camPos.y,
      z: config.camPos.z,
      onUpdate: function () {
        camera.lookAt(center)
      }
    })
  })
})

3. 可选优化 #

如果需要相机看向的中心也平滑过渡，避免切换时视角跳变，可以同步给朝向目标加动画：

// 声明全局变量存储相机当前看向的点
const targetLookAt = new THREE.Vector3()
// 动画修改为同时过渡位置和朝向目标
gsap.to(camera.position, {
  duration: 1,
  x: config.camPos.x,
  y: config.camPos.y,
  z: config.camPos.z
})
gsap.to(targetLookAt, {
  duration: 1,
  x: center.x,
  y: center.y,
  z: center.z,
  onUpdate: function() {
    camera.lookAt(targetLookAt)
  }
})

内容的提问来源于stack exchange，提问作者Mark t