# 💖 ThinkYou - 浪漫的3D星空表白应用

一个使用 Three.js 创建的浪漫3D星空场景，"我想你了"等表白文字会从远处飞向屏幕，营造出唯美的视觉效果。

## ✨ 主要功能

### 🌟 核心效果
- **动态文字消息**: "我想你了"、"想念你"、"好想你"、"爱你"等文字从远处飞向相机
- **美丽的文字框**: 每条消息都有发光的粉色边框和优雅的渐变背景
- **流畅的动画**: 文字在飞行过程中有轻微的漂浮效果
- **智能淡出**: 文字接近相机时会逐渐透明直到消失

### 🌌 背景效果
- **动态星空**: 包含数千颗不同颜色的星星，缓慢旋转营造深邃感
- **流星效果**: 随机生成的流星从天空划过，每颗流星都有独特的颜色和轨迹
- **相机摇摆**: 相机轻微摇摆模拟真实观感
- **渐变背景**: 深邃的紫色到黑色渐变背景

### 🎮 交互控制
- **播放/暂停**: 控制整个动画的播放状态
- **手动生成**: 点击按钮立即生成新的表白消息
- **速度调节**: 调整消息飞行的速度 (0.1x - 4x)
- **星空密度**: 调整星星数量 (100 - 5000颗)
- **键盘控制**: 
  - `空格键`: 播放/暂停
  - `回车键`: 生成新消息
  - `H键`: 显示/隐藏控制面板
  - `R键`: 重置场景

### 🎨 视觉优化
- **响应式设计**: 完美适配各种屏幕尺寸
- **优雅的UI**: 半透明面板配合毛玻璃效果
- **发光效果**: 按钮、文字、边框的发光效果
- **流畅动画**: 60fps流畅动画，使用requestAnimationFrame优化
- **性能优化**: 智能的对象池管理，及时清理不需要的资源

## 🚀 技术栈

- **React 19**: 现代化的React Hooks
- **Three.js**: 3D图形渲染引擎
- **TypeScript**: 类型安全的开发体验
- **Tailwind CSS**: 现代化的CSS框架
- **Astro**: 静态站点生成器

## 📱 使用方法

1. **启动项目**:
   ```bash
   pnpm dev
   ```

2. **访问页面**:
   - 主页: `http://localhost:4321/`
   - 演示页: `http://localhost:4321/demos/base`

3. **控制操作**:
   - 使用左侧控制面板调整各种参数
   - 使用键盘快捷键进行快速操作
   - 右侧信息面板显示当前效果说明

## 🎯 使用场景

- **表白神器**: 向心爱的人表达爱意
- **纪念日礼物**: 特殊日子的浪漫惊喜
- **网站装饰**: 为网站添加浪漫的背景效果
- **教学演示**: Three.js和React结合的教学案例
- **创意展示**: 展示3D编程技能的作品集

## 🛠️ 自定义配置

### 消息内容
在 `generateMessage` 函数中修改 `messages` 数组来自定义表白文字：

```typescript
const messages = ['我想你了', '想念你', '好想你', '爱你', '❤️', '你的自定义文字']
```

### 颜色主题
在 `createTextGeometry` 函数中修改颜色配置：

```typescript
// 边框颜色
context.strokeStyle = '#ff69b4' // 粉色
context.shadowColor = '#ff69b4'

// 背景渐变
gradient.addColorStop(0, 'rgba(20, 20, 40, 0.9)')
gradient.addColorStop(1, 'rgba(40, 20, 60, 0.9)')
```

### 星空效果
在 `createStarField` 函数中调整星星的颜色分布和大小。

## 🔧 性能优化

- 使用 `useCallback` 优化函数重新创建
- 智能的对象生命周期管理
- 及时清理不需要的Three.js资源
- 使用 `requestAnimationFrame` 实现流畅动画
- 响应式的星空密度控制

## 📦 项目结构

```
src/
├── thinkyou/
│   └── index.tsx          # 主要的Three.js组件
├── styles/
│   ├── global.css         # 全局样式
│   └── thinkyou.css       # ThinkYou应用专用样式
└── pages/
    ├── index.astro        # 主页
    └── demos/
        └── base.astro     # 演示页面
```

## 💝 特别说明

这个项目充满了对爱情的美好憧憬，每一个细节都经过精心设计，希望能为你的表白之路增添一份浪漫的色彩。无论是向心爱的人表达爱意，还是在特殊的日子里制造惊喜，这个应用都能成为你表达情感的完美工具。

愿所有的爱意都能被温柔以待，愿每一份真情都能得到回应。💖

---

*"我想你了" - 这简单的四个字，承载着最深的思念。*