今天要学习的是threejs 补间动画Tween应用

threejs版本

使用到的threejs版本

"three": "^0.154.0",

创建一个球

创建1个球体，为补间动画做准备

// 创建1个球

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

引入tween

import * as TWEEN from "three/examples/jsm/libs/tween.module.js";

移动动画

const tween = new TWEEN.Tween(sphere1.position);

tween.to({x: 4}, 1000)
tween.start()

渲染操作更新

在渲染操作中进行更新 TWEEN.update()

function render() {
renderer.render(scene, camera); //执行渲染操作
controls.update();
requestAnimationFrame(render);
TWEEN.update()
}

其他相关配置

我们可以设置循环往复 以及无数次循环动画。

tween.to({x: 4}, 1000)

tween.onUpdate(() => {
console.log(sphere1.position.x)
})

// 设置无数次循环
tween.repeat(Infinity)

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

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


tween.start()

动画1链接动画2

执行完动画1后执行动画2

const tween = new TWEEN.Tween(sphere1.position);
tween.to({x: 4}, 1000)
let tween2 = new TWEEN.Tween(sphere1.position)
tween2.to({y: -4}, 1000)
tween.chain(tween2)

相关回调函数

tween.onStart(() => {
console.log('开始')
})
tween.onComplete(() => {
console.log('结束')
})
tween.onStop(() => {
console.log('停止')
})
tween.onUpdate(() => {
console.log('更新')
})

演示实例

threejs 补间动画Tween应用

学习笔记

当前内容为 threejs视频教程 Three.js可视化企业实战WEBGL课 -Three.js开发入门与调试设置-补间动画Tween应用-学习笔记

笔记代码

笔记代码项目基于vue3 vite js nodejs16 运行

运行效果可查看演示地址：threejs 补间动画Tween应用