1. tweenjs创建threejs动画

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

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

#npm安装

在工程化开发的时候可以通过npm命令行安装tween.js模块。

npm i @tweenjs/tween.js@^18

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

#.html引入tween.js

tween.js-master文件包/dist目录下有多个js文件，如果你想script标签直接引入tween.umd.js即可。

<script src="./tween.js-master/dist/tween.umd.js"></script>

.html学习环境模拟开发环境中引入方式,就可以和开发环境一样书写import TWEEN from '@tweenjs/tween.js'。

<!-- type="importmap"功能：tween在html学习环境和开发环境一样写法 -->
<script type="importmap">
    {
		"imports": {
			"@tweenjs/tween.js": "./tween.esm.js"
		}
	}
</script>
<script type="module">
    import TWEEN from '@tweenjs/tween.js';
</script>

#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 loop() {
    requestAnimationFrame(loop);
}
loop();

function loop() {
    TWEEN.update();//tween更新
    requestAnimationFrame(loop);
}

浏览器控制台测试查看tweenjs是否逐渐改变pos对象的x和y属性

function loop() {
    TWEEN.update();
    // 测试tweenjs是否逐渐改变pos对象的x和y属性
    console.log(pos.x,pos.y);
    requestAnimationFrame(loop);
}

#tweenjs改变threejs模型对象位置

three.js模型的位置mesh.position属性是一个具有.x、.y、.z属性的对象，可以直接使用tweenjs直接改变。

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

最后不要忘记在渲染循环中更新TWEEN.update();即可。

// 渲染循环
function render() {
    TWEEN.update();
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
render();

换个语法形式书写也可以，更简洁

const tween = new TWEEN.Tween(mesh.position).to({x: 100,y: 50}, 2000).start();

const tween = new TWEEN.Tween(mesh.position)
.to({x: 100,y: 50}, 2000)
.start();

#测试模型缩放动画

模型的缩放属性mesh.scale和.position属性一样是一个具有.x、.y、.z属性的对象,你也可以直接用tweenjs动画控制。

new TWEEN.Tween(mesh.scale).to({
    x: 100,
    y: 50
}, 2000).start();

2. tweenjs相机运动动画

下面给大家讲解如何通过tweenjs实现threejs相机动画，具体说就是使用tweenjs改变相机的位置camera.position和视线方向。

#相机飞行动画(从一个点飞到另一个点)

引入tweenjs，并在requestAnimationFrame动画中执行TWEEN.update();更新。

import TWEEN from '@tweenjs/tween.js';
// 渲染循环
function render() {
    TWEEN.update();
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
render();

相机动画:从一个点移动到另一个点

camera.position.set(202, 123, 125);
new TWEEN.Tween(camera.position)
.to({x: 202,y: 123,z: 50}, 3000)
.start()

#相机飞行过程中重新计算相机视线

只改变相机位置，相机默认视线方向保持不变，如果你想重新计算相机视线方向，可以在相机位置改变的过程中不停地执行lookAt()即可。

camera.position.set(202, 123, 125);
camera.lookAt(0, 0, 0);
new TWEEN.Tween(camera.position)
.to({x: 202,y: 123,z: -350}, 3000)
// tweenjs改变参数对象的过程中，.onUpdate方法会被重复调用执行
.onUpdate(function(){
    camera.lookAt(0, 0, 0);
})
.start()

#Tweenjs回调函数

twwenjs库提供了onStart、onUpdate、onComplete等用于控制动画执行的回调函数。

onStart：动画开始执行触发
onUpdate：动画执行过程中，一直被调用执行
onComplete：动画正常执行完触发

.onUpdate(function(obj){})结构中，obj对应的是new TWEEN.Tween(pos)的参数对象pos。

const tween = new TWEEN.Tween(pos).to({x: 0}, 4000)
// 开始执行：动画片段tween开始执行的时候触发onStart
.onStart(function(obj){
	...
})

#相机圆周运动，且保持相机镜头对准坐标原点

const R = 100; //相机圆周运动的半径
new TWEEN.Tween({angle:0})
.to({angle: Math.PI*2}, 16000)
.onUpdate(function(obj){
    camera.position.x = R * Math.cos(obj.angle);
    camera.position.z = R * Math.sin(obj.angle);
    camera.lookAt(0, 0, 0);
})
.start()

动画库tween.js