threeJS-补间动画TWEEN

第一步：引入补间动画的插件

第二步：创建一个物体,附：前期的基本工作要做好

第三步：创建实例和动画并调用对应的方法

// 导入tween补间动画
import * as TWEEN from "three/examples/jsm/libs/tween.module.js"

// 创建一个属性管理器，这个引入看前期的文档
const gui = new GUI()

// 创建三个球
const sphere1 = new THREE.Mesh(
  new THREE.SphereGeometry(1, 32, 32),
  new THREE.MeshBasicMaterial({color:0x00ff00})
)
sphere1.position.x = -4
scene.add(sphere1)

// 创建tween
const tween = new TWEEN.Tween(sphere1.position)
// to({去到哪里，自动识别position的x值}，花费多少时间)
tween.to({x:4},1000).onUpdate(() => {
  console.log(sphere1.position.x)
})
// 设置循环次数
// tween.repeat(Infinity)
// 设置循环往复
// tween.yoyo(true)
// 设置延迟运行时间
// tween.delay(3000)
// 设置缓动函数
tween.easing(TWEEN.Easing.Quadratic.InOut)

// 创建第二个补间动画
const tween2 = new TWEEN.Tween(sphere1.position)
tween2.to({y:4},1000)
// x.chain(y)，第一个动画x完成后链接第二个动画执行
tween.chain(tween2)

tween2.chain(tween)

// 启动补间动画
tween.start()

// 动画开始函数
tween.onStart(()=>{ console.log("开始")})
// 动画完成函数
tween.onComplete(()=>{console.log("完成")})
// 动画停止函数
tween.onStop(()=>{console.log("停止")})
// 更新函数，即移动时都会触发
tween.onUpdate(()=>{console.log("更新")})
 
 let params = {
  stop : () => {
    // 暂停事件
    tween.stop()
  }
 }
 // 用来控制动画暂停
 gui.add(params, "stop").name("暂停")
 // 最后，要记得在渲染函数中更新
 // 渲染函数
 const animate = () => {
   requestAnimationFrame(animate)
   // 渲染
   renderer.render(scene, camera)
	 TWEEN.update()
 }
 
 animate()