1. 效果如下:

1.gif

2. 代码实现

// 首先第一步: 需要引入tween.js 文件
<script src="js/tween.min.js"></script>
// 第二步: 
function render() {
  TWEEN.update() // 在render方法中添加该代码
  renderer.render(scene, camera)
}
animate()

function animate() {
  render()
  requestAnimationFrame(animate)
}

// 第三步: 创建物体 让物体开始移动
btns[0].onclick = function () {
  // testMesh 是一个mesh对象  
  new TWEEN.Tween(testMesh.position).to({
    x: 100, y: 0, z: 100
  }).easing(TWEEN.Easing.Quadratic.Out).start()
}

3. 关于其他的回调函数

let yellowTween
btns[2].onclick = function () {
  yellowTween = new TWEEN.Tween(mesh2.position).to({
      x: 200,
      y: 10,
      z: -200
    }).easing(TWEEN.Easing.Quadratic.Out)
    .onStart(function (obj) {
      console.log('onStart', obj)
    }).onUpdate(function (obj) {
      console.log('onUpdate', obj)
    }).onComplete(function (obj) {
      console.log('onComplete', obj)
    }).onStop(function (obj) {
      console.log('onStop', obj)
    })
    .start()
}
// 绿色物体停止
btns[3].onclick = function () {
  yellowTween.stop()
}

3.1. 核心代码说明

64.jpg

4. 总结

1. start方法会触发onStart回调函数, 
2. stop方法会触发onStop回调函数,
3. 在运动的过程中会一直触发onUpdate方法,
4. 动画完成后会触发onCOmplete方法

5. 案例 -> 分析上面的案例,为什么物体会移动起来?

const position = {
  x: 0,
  y: 0,
  z: 0
}
new TWEEN.Tween(position).to({
  x: 100,
  y: 100,
  z: 100
}).easing(TWEEN.Easing.Quadratic.Out).start().onUpdate(function (obj) {
  console.log('obj', obj)
  console.log('position === obj', position === obj) // true
})

原因: mesh.position是一个引用类型的数据,所以物体就会移动起来了

5.1. 核心代码说明

65.jpg

6. 多个运动组合在一起,效果如下

2.gif

// 红色物体开始运动
btns[2].onclick = function () {
  redTween = new TWEEN.Tween(mesh.position)
  redTween.to({
      x: 200,
      y: 10,
      z: -200
    }).easing(TWEEN.Easing.Quadratic.Out)
    .onStart(function (obj) {
      console.log('onStart', obj)
    }).onUpdate(function (obj) {
      console.log('onUpdate', obj)
    }).onComplete(function (obj) {
      console.log('onComplete', obj)
      // 这个地方需要重新实例化一下
      redTween = new TWEEN.Tween(mesh.position)
      redTween.to({
        x: 200,
        y: 10,
        z: 0
      }).easing(TWEEN.Easing.Quadratic.Out).start()
    }).onStop(function (obj) {
      console.log('onStop', obj)
    })
    .start()
}