最近抖音热门的粒子特效,圣诞节祝福版。
全AI编写。
【演示站点】
立即下载
【源码下载】
立即下载
【AI提示词】
- 你是一名资深前端与图形工程师,使用 Vue3 与 Three.js 的 CDN 版本构建单文件 HTML(内联 CSS 与 ``)。
- 不使用打包工具或额外依赖;仅加载官方 CDN;遵循安全与性能最佳实践。
- 三维场景包含 Scene、PerspectiveCamera、WebGLRenderer,启用 SRGB、雾效与基础光源;渲染器像素比限制在合理范围。
- 所有效果基于独立粒子或精灵实现:分阶段发散→缓动汇聚为分层圣诞树,整组缓慢自转;背景雪花为 Sprite(含光晕),不遮挡主体;弹幕为 CSS 动画层。
- 移动端与 PC 适配:初始化与窗口缩放时相机自适应,保证树体在不同纵横比下完整可见。
请按以下要求帮我编写代码
- 使用 Vue3 + Three.js(CDN ESM)输出一个完整单文件 HTML 页面,包含:
- 粒子动画:从中心向外发散,再缓动汇聚为“分层”圣诞树;整体缓慢自转
- 粒子分集:树冠、主干、挂饰、顶部装饰与点缀均用粒子或精灵实现,并参与统一发散/汇聚
- 背景雪花:Sprite 雪花纹理与柔光光晕;轻微旋转、漂移与闪烁;层级最低且不遮挡树体
- 弹幕:多条、色彩丰富,从右向左飘过,位于画布上层
- 适配:相机自适应保证在移动端与 PC 均完整显示树体,
resize时更新 - 功能:右上角有一个全屏按钮,点击按钮页面全屏显示
- 禁用外部依赖与打包,保持代码清晰结构化:初始化、目标分布计算、动画循环、相机适配与 UI 层分离。

