Three.js 和 tween.js - 文章教程

Three.js 和 tween.js

发布于 2021-10-07 字数 1211 浏览 873 评论 0

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

晚风撩人

这个人比较懒,什么都没有填写!

21 文章
1 评论
24137 人气
更多

推荐作者

魏剑帆

文章 0 评论 0

yanggwq

文章 0 评论 0

qq_c2gI5

文章 0 评论 0

qq_iQVWB

文章 0 评论 0