Tween 动画

Tween 动画是一种非常常用的动画效果，它可以让物体在一定时间内从一个状态平滑地过渡到另一个状态。

Three.js 自带 Tween.js 库。

创建一个立方体：

const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)

让立方体从左到右移动：

const tween = new TWEEN.Tween(cube.position)
tween.to({ x: 1 }, 1000)
tween.repeat(Number.POSITIVE_INFINITY)
tween.start()

注意要让 Tween 更新：

// 渲染
function animate() {
  //...

  TWEEN.update()
}

本节示例代码：https://github.com/wukaipeng-dev/threejs-demo/blob/main/02-basic/src/main-tween.ts