🎄 3D 圣诞树互动应用

一个基于 Three.js 和 MediaPipe Hands 的 3D 交互式圣诞树。支持手势控制、动态特效与手势交互。

✨ 核心特性

• 手势交互：支持旋转、缩放、主题切换（握拳）及雪景开关（耶）。
• 粒子系统：基于着色器（GLSL）实现的程序化树体、装饰与五角星。
• 实时追踪：通过网络摄像头实现毫秒级手势识别。
• 动态雪景：可随时开启的粒子落雪效果。

🛠 技术栈

• 引擎: Three.js (WebGL)
• 手势: MediaPipe Hands
• 构建: Vite
• 逻辑: 原生 JavaScript (ES Modules)

🚀 快速开始

安装依赖

npm install

启动开发服务器

npm run dev

构建项目

npm run build

如果你的 package.json 没有 build 脚本，也可以用：

npx vite build

本地预览构建产物

npx vite preview

🖼️ 替换成你的 32 张照片

把你的照片放到目录：

• public/images/photos/

说明：该目录会被 .gitignore 忽略（照片不会提交到仓库）。

命名规则（必须两位数）：

• 01.jpg, 02.jpg, ... , 32.jpg

部署到 /ct/ 后，它们会以这些 URL 被加载：

• /ct/images/photos/01.jpg ~ /ct/images/photos/32.jpg

提示：如果你在本地通过 npm run dev 访问，通常路径是 /images/photos/01.jpg；当部署到 /ct/ 子路径时，才会变成 /ct/images/photos/01.jpg。

🚚 部署脚本

仓库只包含模板脚本：

• deploy_christmas.example.sh

把它复制为本地私有版本（包含你的服务器信息，不会被提交）：

cp deploy_christmas.example.sh deploy_christmas.sh
chmod +x deploy_christmas.sh

然后编辑 deploy_christmas.sh，填入你的服务器 SSH 别名、端口、部署模式等，再运行：

./deploy_christmas.sh

注意：deploy_christmas.sh 和临时生成的 .remote_deploy.sh 都被 .gitignore 忽略，避免把服务器信息提交进仓库。

更完整的部署步骤见：DEPLOY.md。

🎵 BGM 署名

本项目包含背景音乐文件：

• "Christmas Theme 2" — Alexander Nakarada（CC BY 4.0）
• 来源：https://commons.wikimedia.org/wiki/File:Alexander_Nakarada_-_Christmas_Theme_2_(cc-by)_(filmmusic).mp3
• 许可：https://creativecommons.org/licenses/by/4.0/