Three.js 和 tween.js

Question

通过 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();