【3D】tween.js的问题-控制相机时回调函数重复执行

·  阅读 28

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第5天,点击查看活动详情

问题

使用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(function () {
    // callBack && callBack()
    // self.inspectCurveList()
  })
  tween.start()
},
inspectCurveList () {
  console.log(camera.position, 111)
  console.log(controls.object.position, 222)
  console.log(controls.target, 333)
  ……业务代码省略……
}
复制代码

正确代码

参考情形三

情形一

代码描述:

定义callBack参数为inspectCurveList(),但是tween动画完成后tween.onComplete中并未调用。

this.inspectCamera({x: 2.9, y: 0.6, z: 7}, {x: 2.9, y: 0.6, z: 1.6}, this.inspectCurveList())
tween.onComplete(function () {
  // callBack && callBack()
  // self.inspectCurveList()
})
复制代码

控制台打印:

  • {x: 16, y: 6, z: 10} 111
  • {x: 16, y: 6, z: 10} 222
  • {x: 0, y: 0, z: 0} 333

说明:

传递callBack参数时,inspectCurveList()函数初始化,执行了内部代码,设置了一些初始值,若其他地方监听了这些值就容易出错。

情形二

代码描述:

定义callBack参数为inspectCurveList(),且在tween动画完成后tween.onComplete中通过回调函数调用。

this.inspectCamera({x: 2.9, y: 0.6, z: 7}, {x: 2.9, y: 0.6, z: 1.6}, this.inspectCurveList())
tween.onComplete(function () {
  callBack && callBack()
  // self.inspectCurveList()
})
复制代码

控制台打印:

  • {x: 16, y: 6, z: 10} 111
  • {x: 16, y: 6, z: 10} 222
  • {x: 0, y: 0, z: 0} 333

说明:

此时就出现了情形一说的问题,因为在初始化时设置了一些初始值(相机位置和目标点),导致tween动画完成后调用时相机位置和目标点会突然闪一下。

情形三

代码描述:

不定义callBack参数,在tween动画完成后tween.onComplete中直接调用inspectCurveList()函数。

this.inspectCamera({x: 2.9, y: 0.6, z: 7}, {x: 2.9, y: 0.6, z: 1.6})
tween.onComplete(function () {
  // callBack && callBack()
  self.inspectCurveList()
})
复制代码

控制台打印:

  • {x: 2.9, y: 0.6, z: 7} 111
  • {x: 2.9, y: 0.6, z: 7} 222
  • {x: 2.9, y: 0.6, z: 1.6} 333

说明:

这才对嘛!此时tween动画最后的相机位置和目标点{x: 2.9, y: 0.6, z: 7}, {x: 2.9, y: 0.6, z: 1.6},才正好等于inspectCurveList()函数开始时的相机位置和目标点,不会出现闪现。

情形四

代码描述:

直接看代码吧,我相信没有谁会这么写吧,然而我就一时脑抽这么写了,出现问题还各种疑惑。

this.inspectCamera({x: 2.9, y: 0.6, z: 7}, {x: 2.9, y: 0.6, z: 1.6}, this.inspectCurveList())
tween.onComplete(function () {
  // callBack && callBack()
  self.inspectCurveList()
})
复制代码

说明:

干嘛呢,定义了callBack参数又不调用,而且还在tween动画结束后直接在此调用inspectCurveList()函数。

这样会执行两次啊,初始化一次,结束后调用一次,而且会出现闪现啊,真是傻了。。。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改