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.delay(3000)
//循环2次
 tween.repeat(2)

缓动函数

// 设置缓动函数
tween.easing(TWEEN.Easing.Quadratic.InOut)
//启动补间动画
tween.start()

const tween2 = new TWEEN.Tween(sphere.position)
tween2.to({ x: -4 }, 2000)
// 链接
tween.chain(tween2)
tween2.chain(tween)

完整代码

<!-- App补间动画tweenjs -->
<script setup>
import { onMounted } from 'vue'
// 导入threejs
import * as THREE from 'three'

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
// 导入lil.gui
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
// 导入hdr加载器
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
// 导入GLFT
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
// 导入解压器
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
// 导入tween补间动画库
import * as TWEEN from 'three/examples/jsm/libs/tween.module.js'
// 创建场景
const scene = new THREE.Scene()
// 创建相机
const camera = new THREE.PerspectiveCamera(
    45, //视角
    window.innerWidth / window.innerHeight, //宽高比
    0.1, //近平面
    1000 //远平面
)
// 创建渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

// 设置相机位置
camera.position.x = 15
camera.position.y = 2
camera.position.z = 5
camera.lookAt(3, 0, 0) //原点
// 坐标辅助器 （xyz轴绘制）
const axesHelper = new THREE.AxesHelper(5)

scene.add(axesHelper)
// 轨道控制器  (旋转缩放)
const controls = new OrbitControls(camera, renderer.domElement)
// const controls = new OrbitControls(camera, document.body)
// 设置带阻尼（惯性缓动效果）
controls.enableDamping = true
// 阻尼系数
controls.dampingFactor = 0.05
// 旋转速度
// controls.autoRotate = true
// 渲染函数
;(function animate() {
    controls.update()
    requestAnimationFrame(animate)
    renderer.render(scene, camera)
    // 更新tween
    TWEEN.update()
})()
// 渲染
// 监听窗口变化
window.addEventListener('resize', () => {
    // 重置渲染器宽高比
    renderer.setSize(window.innerWidth, window.innerHeight)
    // 重置相机宽高比
    camera.aspect = window.innerWidth / window.innerHeight
    // 更新相机投影矩阵
    camera.updateProjectionMatrix()
})

const gui = new GUI()

const sphere = new THREE.Mesh(
    // 球模型
    new THREE.SphereGeometry(1, 32, 32),
    // 球材质
    new THREE.MeshBasicMaterial({
        color: 0x00ff00,
    })
)
sphere.position.x = -4
scene.add(sphere)

// 创建补间对象
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.delay(3000)
//循环2次
// tween.repeat(2)
// 设置缓动函数
tween.easing(TWEEN.Easing.Quadratic.InOut)
//启动补间动画
tween.start()

const tween2 = new TWEEN.Tween(sphere.position)
tween2.to({ x: -4 }, 2000)
// 链接
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()
    },
    start: () => {
        tween.start()
    },
    pause: () => {
        tween.pause()
    },
    resume: () => {
        tween.resume()
    },
}
gui.add(params, 'start').name('开始')
gui.add(params, 'stop').name('停止') //不可恢复
gui.add(params, 'pause').name('暂停')
gui.add(params, 'resume').name('恢复')
</script>

感谢：b站up主：老陈打码 以及 threejs中文网 教学及参考文档
到此基础入门（九）学习告一段落，道阻且长，行则将至。与诸君共勉。 ⭐️