前端代码：流光溢彩动态背景/跟随鼠标/点击变色

流光跟随 – WebGL/WebGPU 3D 交互式光标效果模板

🎨 项目概述

流光跟随是一款基于 Three.js 构建的高性能 3D 交互式光标效果模板，支持 WebGL 和 WebGPU 双渲染引擎。当用户移动鼠标时，屏幕会呈现出炫酷的彩色管状流光跟随效果，点击页面即可随机切换配色方案，为您的网站或应用增添极具视觉冲击力的交互体验。

无论您是前端开发者、UI/UX 设计师、还是需要为产品展示或品牌官网打造独特视觉效果的团队，这个模板都能帮助您快速实现专业级的 3D 交互效果，无需复杂的 3D 编程知识。

✨ 核心特性

• 双引擎支持：自动适配 WebGL 和 WebGPU，确保在不同浏览器环境下都能流畅运行
• 实时交互：鼠标移动实时生成流畅的 3D 管状跟随效果
• 动态配色：点击页面即可随机切换配色方案，支持自定义颜色配置
• 高性能渲染：基于 Three.js 优化，确保流畅的 60fps 动画表现
• 响应式设计：完美适配各种屏幕尺寸，支持移动端触摸交互
• 轻量级实现：代码简洁，易于集成和定制

🎨 设计风格与配色方案

视觉风格

本项目采用现代极简主义设计风格，以深色背景（黑色）作为主色调，营造出科技感与未来感的视觉氛围。白色文字配合柔和的阴影效果，确保在动态背景上的可读性。整体设计注重留白和视觉层次，让 3D 效果成为页面的视觉焦点。

配色方案

默认配色：

• 管状主体颜色：粉紫色（#f967fb）、翠绿色（#53bc28）、深紫色（#6958d5）
• 灯光效果颜色：荧光绿（#83f36e）、暖橙色（#fe8a2e）、亮粉色（#ff008a）、天蓝色（#60aed5）

这种配色方案融合了霓虹灯风格和赛博朋克美学，通过高饱和度的色彩对比创造出强烈的视觉冲击力。粉紫色和深紫色的组合带来神秘感，翠绿色和荧光绿增添活力，暖橙色和亮粉色则注入热情与动感。

技术实现

• 字体：Montserrat 无衬线字体，现代简洁
• 布局：全屏居中布局，突出核心内容
• 交互反馈：平滑的颜色过渡和悬停效果
• 性能优化：使用固定定位的 Canvas 层，避免重排重绘

🚀 适用场景

适合的人群

1. 前端开发者
   • 需要为项目添加炫酷 3D 交互效果的开发者
   • 学习 Three.js、WebGL/WebGPU 技术的开发者
   • 想要快速集成高质量视觉效果的技术人员
2. UI/UX 设计师
   • 需要为设计作品集或作品展示页面添加动态效果
   • 寻求创新交互设计灵感的创意工作者
   • 需要向客户展示高端视觉效果的设计师
3. 产品团队
   • 需要为产品官网或落地页打造独特视觉体验
   • 希望提升品牌形象和用户参与度的营销团队
   • 需要制作产品演示或技术展示的团队
4. 个人开发者
   • 想要创建个人作品集或博客的开发者
   • 需要为项目演示添加吸引眼球的视觉效果
   • 对 Web 3D 技术感兴趣的爱好者

适用项目类型

• 品牌官网：为高端品牌或科技公司官网增添科技感
• 产品落地页：提升产品展示页面的视觉吸引力
• 作品集网站：为设计师或开发者作品集添加动态元素
• 活动页面：为营销活动或发布会页面营造氛围
• 技术演示：展示 WebGL/WebGPU 技术能力的演示项目
• 游戏化界面：为应用或网站添加游戏化交互元素

📦 技术栈

• Three.js：强大的 3D 图形库
• threejs-components：封装好的组件库，简化开发流程
• WebGL/WebGPU：现代浏览器图形渲染 API
• 原生 JavaScript：轻量级，无框架依赖

🎯 快速开始

重要提示

由于使用了 ES6 模块（type="module"），不能直接双击打开 HTML 文件，必须通过本地服务器运行。下载包内已提供启动脚本。

启动方式

使用说明

🔧 自定义配置

在 script.js 中可以自定义：

• 管状颜色数量及具体颜色值
• 灯光颜色数量及具体颜色值
• 灯光强度等参数

📄 许可证

本项目基于开源代码修改，适用于个人和商业项目演示使用。