tween动画控制threejs的相机时的问题回调函数重复执行

最新推荐文章于 2024-11-15 15:45:18 发布

原创

最新推荐文章于 2024-11-15 15:45:18 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了在使用tween动画控制threejs相机时遇到的回调函数重复执行或错误执行的问题。通过分析不同情形，如参数传递、函数调用时机等，揭示了可能导致问题的原因，并提供了正确的代码示例，以确保动画结束后相机位置的平滑过渡。

问题

使用tween动画，在其执行完成后tween.onComplete中调用回调函数，发现回调函数执行有误或重复执行。

关键代码

this.inspectCamera({x: 2.9, y: 0.6, z: 7}, {x: 2.9, y: 0.6, z: 1.6}, this.inspectCurveList())

inspectCamera (position, target, callBack) {
  let self = this
  let tween = new TWEEN.Tween({
    px: camera.position.x, // 起始相机位置x
    py: camera.position.y, // 起始相机位置y
    pz: camera.position.z, // 起始相机位置z
    tx: controls.target.x, // 控制点的中心点x 起始目标位置x
    ty: controls.target.y, // 控制点的中心点y 起始目标位置y
    tz: controls.target.z // 控制点的中心点z 起始目标位置z
  })
  tween.to({
    px: position.x,
    py: position.y,
    pz: position.z,
    tx: target.x,
    ty: target.y,
    tz: target.z
  }, 3000)
  tween.onUpdate(function () {
    camera.position.x = this.px
    camera.position.y = this.py
    camera.position.z = this.pz
    controls.target.x = this.tx
    controls.target.y = this.ty
    controls.target.z = this.tz
  })
  tween.onComplete(functio