# christmas-tree-3d

**Repository Path**: yr_binary/christmas-tree-3d

## Basic Information

- **Project Name**: christmas-tree-3d
- **Description**: 3D Christmas Tree project built with Vite, Vue 3, and Three.js
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-21
- **Last Updated**: 2025-12-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 3D Christmas Tree 🎄

一个基于 **Vite** + **Vue 3** + **Three.js** 开发的 3D 圣诞树互动场景。

## ✨ 特性

- **3D 沉浸式场景**：包含圆柱形树干和三层圆锥树叶的 3D 圣诞树。
- **精美装饰**：
  - 🎨 **装饰球**：随机分布的红、金、银三色金属质感装饰球。
  - 💡 **螺旋灯串**：沿树身螺旋缠绕的动态闪烁灯串。
  - ⭐ **顶星**：树顶闪耀的金色星星。
- **氛围特效**：
  - ❄️ **雪花粒子**：支持下落与横向飘移的无限循环雪花系统。
  - 🌗 **多主题**：支持“暖色（Warm）”与“冷色（Cool）”两种氛围主题切换。
- **交互功能**：
  - 🖱️ **全视角控制**：支持旋转、缩放、平移视角（OrbitControls）。
  - 🎥 **相机切换**：支持全景与近景仰视两种预设视角切换。
  - ⏯️ **动画控制**：支持一键播放/暂停场景动画。
- **工程化**：
  - 🛠️ 使用 **Vite** 构建，秒级启动。
  - 📦 严格锁定 **Three.js** 版本 (0.152.2) 确保稳定性。
  - 🧹 完善的资源清理（Dispose）机制，防止内存泄漏。

## 🛠️ 技术栈

- [Vue 3](https://vuejs.org/)
- [Vite](https://vitejs.dev/)
- [Three.js](https://threejs.org/)

## 🚀 快速开始

### 环境要求

- Node.js (推荐 v16+)
- npm 或 yarn

### 安装

1. 克隆仓库：
   ```bash
   git clone https://gitee.com/<your-username>/christmas-tree-3d.git
   cd christmas-tree-3d
   ```

2. 安装依赖：
   ```bash
   npm install
   ```

3. 启动开发服务器：
   ```bash
   npm run dev
   ```

4. 打开浏览器访问 `http://localhost:5173`。

## 📂 目录结构

```text
christmas-tree-3d/
├── src/
│   ├── components/
│   │   └── ChristmasScene.vue  # 核心 3D 场景组件
│   ├── App.vue                 # 根组件
│   ├── main.js                 # 入口文件
│   └── style.css               # 全局样式
├── index.html                  # HTML 模板
├── vite.config.js              # Vite 配置
└── package.json                # 项目依赖
```

## 📝 许可证

[MIT](LICENSE)