# BirthdayCircle

**Repository Path**: codekpy/birthday-circle

## Basic Information

- **Project Name**: BirthdayCircle
- **Description**: 使用Three.js构建的班级生日倒计网页
- **Primary Language**: JavaScript
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-09
- **Last Updated**: 2026-05-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# BirthdayCircle

行星轨道风格的3D生日展示应用。以地日系统为视觉核心，在地球轨道上分布显示所有同学的生日点位。

## 技术栈

- **构建工具**: Vite
- **3D渲染**: Three.js
- **相机控制**: OrbitControls
- **数据加载**: js-yaml
- **字体**: Cormorant + Montserrat

## 功能特性

- 3D行星轨道可视化
- 液态玻璃UI面板
- 多视角切换（俯视、侧面、透视）
- 鼠标悬停显示生日详情
- 实时搜索过滤
- 自动旋转动画

## 快速开始

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

## 数据格式

在 `public/birthdayList.yaml` 文件中配置生日数据：

```yaml
- name: "张三"
  date: "01-15"
  note: "大学同学"

- name: "李四"
  date: "03-22"
  year: 1995
  note: "同事"
```

| 字段 | 类型 | 必填 | 说明 |
|------|------|------|------|
| name | string | 是 | 姓名 |
| date | string | 是 | 生日日期，格式为 "月-日" |
| note | string | 否 | 备注信息 |
| year | number | 否 | 出生年份 |

## 项目结构

```
BirthdayCircle/
├── index.html
├── package.json
├── vite.config.js
├── style.css
├── public/
│   └── birthdayList.yaml
└── src/
    ├── main.js
    ├── stars.js
    ├── sun.js
    ├── earth.js
    ├── orbit.js
    ├── birthdayPoints.js
    ├── cameraControls.js
    ├── dataLoader.js
    └── tooltip.js
```