补间动画tween

//导入tween
import {TWEEN} from "three/examples/jsm/libs/tween.module.js"

const sphere1=new THREE.Mesh(
	new THREE.SphereGeometry(1,32,32),
  new THREE.MeshBasicMaterial({color:0x00ff00})
)
sphere1.position.x=-4;
scene.add(sphere1)

const tween=new TWEEN.Tween(sphere1.position)
tween.to({x:4},2000)
tween.onUpdate(()=>{
  //时刻输出当前信息
	console.log(sphere1.position.x);
})
// tween.yoyo(true) //来回走
// tween.delay(3000)//延迟
//重复多少次
// tween.repeat(Infinity)  //无数次
tween.repeat(2)
//启动
tween.start()
//
//渲染函数
function animate(){
  requestAnimationFrame(animate)
  TWEEN.update()
}
animate()

补间函数:

//设置缓动函数
tween.easing(TWEEN.Easing.Quadratic.InOut)

动画组

const tween=new TWEEN.Tween(sphere1.position)
tween.to({x:4},2000)
const tween2=new TWEEN.Tween(sphere1.position)
tween2.to({y:4},2000)
tween.chain(tween2)
tween.start()

回调函数