Three.js 入门(补间动画Tween.js)

本篇主要学习内容 :

1. Tween.Js补间动画

点赞 + 关注 + 收藏 = 学会了

1. 什么是Tween.Js?

TweenJS是一个由JavaScript语言编写的补间动画库，如果需要tweenjs辅助你生成动画，对于任何前端web项目，你都可以选择tweenjs库。

如果你使用three.js开发web3d项目，使用tween.js辅助three.js生成动画效果也是比较好的选择。

1.1) 引入tween.Js

import TWEEN from '@tweenjs/tween.js';

1.2) tweenjs基本语法

tweenjs功能从语法的角度讲，就是改变自己的参数对象。

const pos = {
   
   x: 0,y: 0};
const tween = new TWEEN.Tween(pos);//创建一段tween动画
//经过2000毫秒，pos对象的x和y属性分别从零变化为100、50
tween.to({
   
   x: 100,y: 50}, 2000);
//tween动画开始执行
tween.start();

在requestAnimationFrame动画中，tween更新.update()，tween才能正常执行

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

1.3) tweenjs实践

设置移动动画

const tween = new TWEEN.Tween(sphere.position)
//到达的位置 所需的时间  更新时事件回调
tween.to({
   
    x: 4 }, 2000).onUpdate(() => {
   
   
    console.log(sphere.position.x)
})

循环动画

//循环无数次
 tween.repeat(Infinity)
//循环往复
 tween.yoyo(true)
//延迟操作
 tween.