Three.js 进阶之旅：页面平滑滚动-王国之泪 💧
Posted dragonir
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Three.js 进阶之旅：页面平滑滚动-王国之泪 💧相关的知识，希望对你有一定的参考价值。
本文使用 React + Three.js + React Three Fiber 技术栈，实现一个《塞尔达传说：王国之泪》主题风格基于滚动控制的平滑滚动图片展示页面。通过本文的阅读，你将学习到的知识点包括：了解 R3F 中 useFrame hook 及 useThree hook 基本原理及用法；了解 @react-three/drei 库的基本组成，学习使用它提供的 Preload、useIntersect、ScrollControls、Scroll、及 Image 等组件和方法；用 CSS 生成简单的循环悬浮动画等。
声明：本文涉及图文和模型素材仅用于个人学习、研究和欣赏，请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。
摘要
浏览网页时，常被一些基于鼠标滚轮控制的页面动画所惊艳到，比如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 造成丢帧和画质损失，大屏访问效果更佳。
Three.js 进阶之旅：全景漫游-初阶移动相机版
Three.js 进阶之旅：全景漫游-初阶移动相机版
声明：本文涉及图文和模型素材仅用于个人学习、研究和欣赏，请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。
摘要
3D全景技术可以实现日常生活中的很多功能需求，比如地图的街景全景模式、数字展厅、在线看房、社交媒体的全景图预览、短视频直播平台的全景直播等。Three.js实现全景功能也是十分方便的，当然了目前已经有很多相关内容的文章，我之前就写过一篇《Three.js 实现3D全景侦探小游戏》。因此本文内容及此专栏下一篇文章讨论的重点不是如何实现3D全景图功能，而是如何一步步优雅实现在多个3D全景中穿梭漫游，达到如在真实世界中前进后退的视觉效果。全景漫游系列文章将分为上下两篇，本篇内容我们先介绍如何通过移动相机的方法来达到场景切换的目的。通过本文的学习，你将学到的知识点包括：在
Three.js中创建全景图的几种方式、在3D全景图中添加交互热点、利用Tween.js实现相机切换动画、多个全景图之间的切换等。效果
本文最终将实现如下的效果，左右控制鼠标旋转屏幕可以预览室内三维全景图，同时全景图内有多个交互热点，它们标识着三维场景内的一些物体，比如沙发
以上是关于Three.js 进阶之旅：页面平滑滚动-王国之泪 💧的主要内容，如果未能解决你的问题，请参考以下文章