前端代码：3D 脉冲五角星粒子星尘解构场

一屏沉浸式的 3D 星形粒子秀：星形骨架在三种霓虹主题（熔岩/寰宇/翡翠）间切换，脉冲波将粒子推散再聚合，支持长按蓄力释放冲击。纯前端实现（HTML + CSS + Three.js 模块化），无需额外框架，开箱即用，适合科技展厅、大屏交互 Demo、产品宣传页或课程示例。

模板亮点

• 3D 粒子星形：10,000 颗粒子沿星形路径流动，OrbitControls 带来可转动的空间感。
• 脉冲与解构：点击/长按“释放脉冲”触发冲击波，粒子散落、亮度与尺寸随波动律动。
• 多重霓虹主题：熔岩橙、寰宇紫、翡翠绿三套配色，Bloom 发光与背景渐变随主题切换。
• 现代 CSS UI：毛玻璃控制面板、圆角霓虹按钮、呼应主题的光晕背景，内置移动端细节。
• 模块化架构：样式独立 style.css，逻辑独立 script.js，使用 ES6 module 与 importmap 引入 Three.js 与后期处理器。

设计风格与色彩

• 背景：深色渐变，突出粒子光感。
• 光效：Bloom + 霓虹渐变，粒子亮度随时间与脉冲变化。
• UI：简洁毛玻璃面板、圆角按钮与品牌徽标，可快速替换品牌文案。

适用人群与场景

• 科技/元宇宙/硬件品牌：首屏动效、展厅大屏或发布会背景。
• 教学/培训：讲解 Three.js 粒子系统、后期处理、OrbitControls 与 CSS UI 结合的示例。
• 互动展示：活动 H5、路演 Demo、数据大屏的视觉吸睛组件。
• 设计师/前端作品集：替换文案与徽标即可生成炫酷展示页。

文件结构

• index.html：页面结构、品牌徽标、中文文案、控制面板。
• style.css：全局样式、主题色、UI 面板与响应式规则。
• script.js：Three.js 粒子场景、Bloom 后期、主题切换与脉冲交互。

使用方式

1. 替换品牌文案或链接：编辑顶部徽标文案/链接，调整按钮文本。
2. 自定义主题：在 script.js 的 themes 中修改颜色与 Bloom 参数；在 style.css 调整背景与光晕。
3. 调整性能：在 script.js 中下调 particleCount 或关闭自动旋转以适配低性能设备。

本地运行教程

本项目使用了 ES6 模块（<script type="module" src="./script.js"></script>），这类项目必须通过 HTTP 服务器运行，不能直接使用 file:// 协议打开。所以在电脑本地测试修改时可以选择下面方法来进行效果预览。

方法一：使用编辑器里的实时预览插件

VS Code 扩展市场安装：Live Preview （作者：ms-vscode 即微软官方扩展）

安装后：

1. 在编辑器中打开你的项目文件夹
2. 右键 index.html
3. 选择 Show Preview
4. 自动启动 http://127.0.0.1:3001/index.html

✔ 自动刷新
✔ 原生支持 ES6 Modules
✔ 支持文件变更监听
✔ 最适合前端 UI 组件、动画、ESM 项目预览

方法二：使用我们提供的脚本

1. 下载项目文件（已内置运行脚本），本地解压。

2. 启动本地服务器

   方式一：使用Node.js脚本（推荐，跨平台）

   			node start-server.js
   # 或指定端口
   node start-server.js --port 3000
   
   		

   方式二：使用Shell脚本（Linux/macOS）

   			./start.sh
   # 或指定端口
   ./start.sh 3000
   
   		

   方式三：使用批处理脚本（Windows）

   			start.bat
   # 或指定端口
   start.bat 3000
   
   		

   或者使用简化版：

   			start.cmd
   # 或指定端口
   start.cmd 3000
   
   		

   方式四：使用Python（如果已安装，跨平台）

   			python3 -m http.server 8080
   # Windows 上也可以使用
   python -m http.server 8080
   
   		

3. 访问项目

   打开浏览器访问： http://localhost:8080/