threejs - 补间动画在 Three.js 中，可以使用 `GSAP` (GreenSock Animation

在 Three.js 中，可以使用 GSAP (GreenSock Animation Platform) 或 Tween.js 来实现动画效果，包括布局动画。Tween.js 是一个轻量级的动画库，非常适合与 Three.js 一起使用来实现简单的动画效果。

引入tween.js

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

// 创建补间对象
const tween = new TWEEN.Tween(sphere1.position)

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

// 动画帧
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  // 更新tween
  TWEEN.update()
}

// 移动位置
tween.to({x: 4}, 2000)

// 设置重复次数
tween.repeat(Infinity)

// 循环往复
tween.yoyo(true)

// 延迟运行
tween.delay(3000)

const tween2 = new TWEEN.Tween(sphere1.position)
tween2.to({y: -4}, 1000)
// 执行完第一个动画，接着执行第二个动画
tween.chain(tween2)