使用threejs实现滚动效果的示例代码
更新时间：2024年01月17日 08:27:51 作者：成雨_
某一天我在刷抖音时,看到一个UI设计师分享了一个好看的网页滚动动效设计,那种飘逸流畅的动画效果立刻抓住了我的眼球,我脑海里立刻开始想象用代码如何实现这个效果,所以本文给大家分享了如何使用threejs实现滚动效果,感兴趣的朋友可以参考下
前因
某一天我在刷抖音时,看到一个UI设计师分享了一个好看的网页滚动动效设计。那种飘逸流畅的动画效果立刻抓住了我的眼球,我脑海里立刻开始想象用代码如何实现这个效果。
于是我把设计师的视频保存下来研究,反复琢磨每个动画细节需要哪些技术来配合。随后我开工码代码,一个个函数、一个个模块地构建起这个动效。在磨合调试的过程中,我时而眉头紧锁,时而按捺不住兴奋的心情。
经常关注优秀的设计作品,尝试用代码实现,这样不仅可以增强自己的编程能力,也可以从中获取乐趣。这种从设计到编码的过程,就像一个创造的闭环。
很高兴可以通过编程让虚拟的代码世界连接起这个美好的现实世界。
设计相关(Figma+dora)
感谢“设计师Cc”提供的稿子
戳这里。对Dora工具有大致了解后，已经大致实现思路，想用代码实现的关键是：滚动 + 关键帧动画
预览
实现
技术选型
3d模型展示：
- @react-three/fiber: 流行的
threejsReact 封装 - @react-three/drei:
threejs开发的辅助工具
动画库：
- GSAP：N逼，很全面的动画库
- ScrollTrigger：
GSAP滚动动画插件
动画实现
关键代码
请先了解 Gsap Timeline 动画配置相关内容，请仔细查看官方示例，体会时间线的妙用。
思路：将滚动插件与时间线动画相关联，然后就是划分每个时间段该做的动画，比如：0~2s(旋转+移动)，2~3s(旋转+...)，其实这个过程就类似于Dora3d网页动效工具在时间轴上打关键帧的过程。
结尾
以上就是使用threejs实现滚动效果的示例代码的详细内容，更多关于threejs实现滚动效果的资料请关注脚本之家其它相关文章！
相关文章
chinaz利用了ajax实现评论的读取操作，下面我们参考chinaz的代码2008-05-05
最近在使用TS+Vue的开发模式，发现项目中大量使用了装饰器，看得我手足无措，今天特意研究一下实现原理，方便自己理解这块知识点，有需要的小伙伴也可以参考一下2022-10-10
这篇文章主要介绍了uniapp微信小程序使用xr加载模型的操作方法,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-07-07
这篇文章主要介绍了详解微信小程序（Taro）手动埋点和自动埋点的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要为大家详细介绍了javascript实现起伏的水波背景效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-05-05
这篇文章主要为大家详细介绍了微信小程序实现侧边栏分类，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
这篇文章介绍了javascript与cookie 的问题，有需要的朋友可以参考一下2013-11-11
最近因为工作需要，弄了好多天的js了，老婆一问我在弄 ajax, 一问我在弄js，她都听得没有一点兴趣了，我自己感觉还好，毕竟做出来了东西就有成就感吧，这里把几个有用但是不常见的东西贴出来供大家参考参考2009-02-02
本文为大家写了个很漂亮、兼容火狐的Js日期选择，自动填充到输入框，代码如下，有需要的朋友可以参考下2013-08-08
最近一直在学习uni-app开发，由于uniapp是基于vue.js技术开发的,所以下面这篇文章主要给大家介绍了关于uniapp微信小程序自定义导航栏的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
最新评论