粒子特效圣诞祝福HTML页面模板及AI提示词

最近刷抖音总能刷到各种炫酷的3D圣诞特效，其中粒子汇聚成圣诞树的动画尤其受欢迎——既保留了圣诞的温馨氛围，又自带科技感和视觉冲击力，用来装饰博客、个人主页再合适不过！

核心技术栈:

• – 前端框架：Vue3（CDN ESM版本，无需打包，直接通过 <script> 引入）
• – 3D图形引擎：Three.js（CDN ESM版本，负责场景、粒子、光源、渲染核心逻辑）
• – 样式实现：原生CSS（完全内联，无外部依赖，含动画、响应式、视觉优化）

– 动画核心：WebGL（通过Three.js ShaderMaterial实现粒子柔光、缓动效果）+ CSS动画（弹幕、雪花光晕）

效果预览:

index

源码下载

圣诞节快乐

AI提示词:

- 你是一名资深前端与图形工程师，使用 Vue3 与 Three.js 的 CDN 版本构建单文件 HTML（内联 CSS 与 `<script type="module">`）。
- 不使用打包工具或额外依赖；仅加载官方 CDN；遵循安全与性能最佳实践。
- 三维场景包含 Scene、PerspectiveCamera、WebGLRenderer，启用 SRGB、雾效与基础光源；渲染器像素比限制在合理范围。
- 所有效果基于独立粒子或精灵实现：分阶段发散→缓动汇聚为分层圣诞树，整组缓慢自转；背景雪花为 Sprite（含光晕），不遮挡主体；弹幕为 CSS 动画层。
- 移动端与 PC 适配：初始化与窗口缩放时相机自适应，保证树体在不同纵横比下完整可见。

**请按以下要求帮我编写代码**
- 使用 Vue3 + Three.js（CDN ESM）输出一个完整单文件 HTML 页面，包含：
  - 粒子动画：从中心向外发散，再缓动汇聚为“分层”圣诞树；整体缓慢自转
  - 粒子分集：树冠、主干、挂饰、顶部装饰与点缀均用粒子或精灵实现，并参与统一发散/汇聚
  - 背景雪花：Sprite 雪花纹理与柔光光晕；轻微旋转、漂移与闪烁；层级最低且不遮挡树体
  - 弹幕：多条、色彩丰富，从右向左飘过，位于画布上层
  - 适配：相机自适应保证在移动端与 PC 均完整显示树体，`resize` 时更新
  - 功能：右上角有一个全屏按钮，点击按钮页面全屏显示
- 禁用外部依赖与打包，保持代码清晰结构化：初始化、目标分布计算、动画循环、相机适配与 UI 层分离。