使用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实现滚动效果的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了JS关闭窗口时产生的事件及用法,结合关闭窗口时提交评论的实例分析了javascript事件触发机制及遮罩层实现技巧,需要的朋友可以参考下2016-08-08
这篇文章主要介绍了JS操作input标签属性checkbox全选的代码，非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-03-03
JavaScript序列化对象实现代码，需要的朋友可以参考下。2009-12-12
这篇文章主要为大家介绍了图片旋转、鼠标滚轮缩放、镜像、切换图片js代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-01-01
今天小编就为大家分享一篇layui富文本编辑器前端无法取值的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
微信小程序诞生之初,功能受限于小程序的理念,微信小程序要体现轻量级的应用特点,但在随后不断更新中,API接口很好的为小程序赋能,使其可以在不影响本质的情况下实现完善功能,这篇文章主要给大家介绍了关于微信小程序中正确使用地图的相关资料,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了微信小程序收藏功能的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06
这篇文章主要介绍了Postman如何实现参数化执行及断言处理,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
这篇文章主要介绍了JS实现网页右侧带动画效果的伸缩窗口代码,通过JavaScript基于时间函数实现页面元素样式渐变效果,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
本文通过示例代码给大家介绍了js中的闭包，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧2017-10-10
最新评论