WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 一对一班

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

本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号 QQ群:187740169 (WebGL-Three.js教程)   邮箱:guolongbang@163.com