Three.js 进阶之旅：页面平滑滚动-王国之泪 💧

何雪林

声明：本文涉及图文和模型素材仅用于个人学习、研究和欣赏，请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。

摘要

浏览网页时，常被一些基于鼠标滚轮控制的页面动画所惊艳到，比如greensock 官网这些 showcase 案例页面就非常优秀，它们大多数都是使用 Tween.js、gasp 及 greensock 提供的一些动画扩展库实现的。使用 Three.js 也能很容易实现丝滑的滚动效果，本文使用 React + Three.js + React Three Fiber 技术栈，实现一个《塞尔达传说：王国之泪》主题风格基于滚动控制的平滑滚动图片展示页面。通过本文的阅读，你将学习到的知识点包括：了解 R3F 中 useFrame hook 及 useThree hook 基本原理及用法；了解 @react-three/drei 库的基本组成，学习使用它提供的 Preload、useIntersect、ScrollControls、Scroll、及 Image 等组件和方法；用 CSS 生成简单的循环悬浮动画等。
效果

本文案例的实现效果如下图所示，当页面每个模块滚动进入视区时，每个模块会具有平滑向上移动的视差效果，并且伴随着由大到小的缩放动画，当鼠标悬浮到当前模块时，模块会产生高亮 ✨ 效果。除此之外，页面还有一些其他的装饰，比如塞尔达风格的页面背景和边框、具有缓动动画效果的希卡之石以及同样具有平滑滚动效果的文字装饰王国之泪四个字。

页面的整体布局是这样的，总共有 7 页，即高度为 700vh，每一页都具有不同的布局风格样式，滚动时都会具有缓动效果。

打开以下链接，在线预览效果，本文中的 gif 造成丢帧和画质损失，大屏访问效果更佳。
<ul>
来源:https://www.cnblogs.com/dragonir/p/17375879.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！