Threejs tween.js

视频讲解参考课程《实战开发常用技能》倒数第二章节

通过Threejs编写一个动画效果的时候，有时候会借助tween.js库实现，通过tween.js库相比较直接写代码更方便简洁。

Threejs结合tween.js小案例

下面源码是Threejs结合tween.js的一个立方体旋转动画的小案例，立方体逆时针旋转和顺时针旋转交替。

<!-- 引入Tween.js库 -->
<script src="Tween.js"></script>

// 立方体网格模型
var mesh = new THREE.Mesh(...);
...
// twwen代码设置
var rota = ({
  x: 0
});
var ro1 = new TWEEN.Tween(rota);
ro1.to({
  x: 1
}, 4000);
ro1.easing(TWEEN.Easing.Sinusoidal.InOut);
ro1.onUpdate(function() {
  mesh.rotation.y = this.x * 2 * Math.PI;
  console.log('onUpdate里面的函数执行一次')
});

var ro2 = new TWEEN.Tween(rota);
ro2.to({
  x: 0
}, 4000);
ro2.easing(TWEEN.Easing.Sinusoidal.InOut);
ro2.onUpdate(function() {
  mesh.rotation.y = this.x * 2 * Math.PI;
});

ro1.chain(ro2);
ro2.chain(ro1);

ro1.start();

// 渲染函数中执行TWEEN的update()方法
function render() {
  TWEEN.update();
  renderer.render(scene, camera);
  // mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
  requestAnimationFrame(render);
}
render();

相关文章

文章1：https://www.jb51.net/article/132263.htm

文章2：https://www.cnblogs.com/createGod/p/6941340.html

下载twwen.js 查看twwen文档

twwen官网：http://www.createjs.cc/tweenjs