# 圣诞树

**Repository Path**: yan6818/christmas-tree

## Basic Information

- **Project Name**: 圣诞树
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-25
- **Last Updated**: 2025-12-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 圣诞树3D效果

一个基于Three.js的3D圣诞树效果，支持自定义文字、照片上传和全屏显示。


## 功能特点

- 🎄 **3D圣诞树**：基于Three.js渲染的立体圣诞树
- ❄️ **动态雪花**：飘落的雪花效果，营造节日氛围
- ✏️ **自定义文字**：可修改显示的中英文文字
- 📷 **照片管理**：支持上传、添加和删除照片
- ⛶ **全屏显示**：支持切换全屏模式
- 📱 **响应式设计**：适配移动端和桌面端
- 👁 **界面控制**：可隐藏/显示界面元素

## 效果截图

### 桌面端效果
![桌面端效果](img/截图1.png)

### 移动端效果
![移动端效果](img/截图2.png)

## 项目结构

```
圣诞树/
├── index.html              # 主页面
├── style/                  # 样式文件夹
│   └── style.css          # 主要样式文件
├── js/                     # JavaScript文件夹
│   ├── loadImg.js         # 图片加载模块
│   └── script.js          # 主要JavaScript代码
├── img/                    # 图片文件夹
│   ├── img_1.jpg          # 照片1
│   ├── img_2.jpg          # 照片2
│   ├── ...
│   └── img_8.jpg          # 照片8
├── kitty.jpg               # 默认图片
├── rename_photos.ps1       # 图片重命名脚本
└── README.md              # 项目说明文档
```

## 技术栈

- **HTML5**：页面结构
- **CSS3**：样式设计
- **JavaScript**：交互逻辑
- **Three.js**：3D图形渲染

## 使用方法

### 直接打开

1. 下载项目文件
2. 双击打开 `index.html` 文件
3. 开始体验圣诞树效果

### 自定义文字

1. 在左侧面板的输入框中输入文字
2. 点击"更新文字"按钮
3. 查看圣诞树下方的文字变化

### 添加照片

1. 点击"选择照片"按钮
2. 选择本地照片文件
3. 照片会自动添加到圣诞树上

### 管理照片

1. 点击"管理照片"按钮
2. 选择要删除的照片
3. 点击"删除选中"按钮

### 其他操作

- **全屏显示**：点击右上角的全屏按钮
- **隐藏界面**：点击右上角的隐藏界面按钮
- **清空所有**：在照片管理面板中点击"清空所有"按钮

## 图片重命名

如果需要添加新照片，可以使用提供的PowerShell脚本重命名照片：

1. 将新照片放入 `img` 文件夹
2. 运行 `rename_photos.ps1` 脚本
3. 照片会自动重命名为 `img_1.jpg`, `img_2.jpg` 等格式

## 浏览器兼容性

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+

## 开发说明

### 依赖

- Three.js v0.160.0

### 模块化设计

- `loadImg.js`：图片加载模块，负责加载和管理图片资源
- `script.js`：主要逻辑，包含3D场景、动画和交互处理

## 许可证

MIT License

## 贡献

欢迎提交Issue和Pull Request！

## 联系方式

如有问题或建议，欢迎反馈。

---

**Merry Christmas! 🎄**