tweenjs-移动threejs中的物体

效果图

方法一：

<el-button type="primary" @click="action">开始运动</el-button>

methods:
action(){
	  var position = { x: -50, y: 0 } // 物体变动前的位置
      var target = { x: 400, y: 50 } // 物体变动后的位置
      var tween = new TWEEN.Tween(position).to(target, 2000).easing(TWEEN.Easing.Quadratic.InOut)
      tween.onUpdate(() => {
        this.objects.position.x = position.x
        this.objects.position.y = position.y
      })
      tween.start()
},
animate () {
      requestAnimationFrame(this.animate)
      TWEEN.update()  一定要在动画循环函数里面更新TWEEN！！
      this.renderer.render(this.scene, this.camera)
}

方法二：

<el-button type="primary" @click="action">开始运动</el-button>

methods:
action(){
	  var position2 = this.objects[0].position // 物体变动前的位置
      var target2 = { x: 400, y: 50, z: 0 } // 物体变动后的位置
      var tween2 = new TWEEN.Tween(position2).to(target2, 2000).easing(TWEEN.Easing.Quadratic.InOut)
      tween2.start()
},
animate () {
      requestAnimationFrame(this.animate)
      TWEEN.update()  一定要在动画循环函数里面更新TWEEN！！
      this.renderer.render(this.scene, this.camera)
}