Fluid Light - 流体光效互动网页特效
项目简介
Fluid Light 是一个基于 Three.js 和 WebGL 开发的流体光效互动网页特效项目。它通过模拟流体动态和光线效果，为网页添加了令人惊艳的视觉体验。
核心特性
- 流体光效动画：模拟真实流体物理特性，创造出柔和流动的光效
- 鼠标互动：根据鼠标移动实时调整光效的流动方向和强度
- 自适应设计：完美适配各种屏幕尺寸，从手机到大屏显示器
视觉效果解析
1. 流体动态模拟
项目使用了自定义的着色器（Shader）技术，通过数学算法模拟流体的物理特性。核心效果通过 CustomPass 实现，它使用正弦波函数创造出波浪般的扭曲效果，使画面产生流动感。
2. 光效处理
通过 UnrealBloomPass 实现的泛光效果，为流体添加了梦幻般的光晕，增强了视觉冲击力。光效参数经过精心调校，既保证了效果的震撼，又不会显得过于刺眼。
3. 噪点纹理
项目引入了 NoisePass 为画面添加细微的噪点纹理，这不仅增加了画面的质感，还使流体效果看起来更加自然，仿佛真实的液体在流动。
4. 互动响应
通过捕捉鼠标移动事件，项目能够实时调整流体的流动方向和强度，让用户感觉自己正在与屏幕上的流体进行互动，大大提升了用户体验。
技术栈
-
Three.js：强大的 3D 库，提供了丰富的 WebGL 功能
-
GLSL：着色器语言，用于编写自定义的视觉效果
-
JavaScript：实现交互逻辑和动画控制
-
Vite：现代前端构建工具，提供极速的开发体验
-
TailwindCSS：实用优先的 CSS 框架，用于页面布局和样式
如何使用
安装依赖
# 使用 npm
npm install
# 或使用 pnpm
pnpm install
# 或使用 yarn
yarn install
开发模式
npm run dev
代码
https://github.com/hexianWeb/fluid-light (opens in a new tab)