generated from template/astro-simple-template
125 lines
4.1 KiB
Markdown
125 lines
4.1 KiB
Markdown
# 💖 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 # 演示页面
|
||
```
|
||
|
||
## 💝 特别说明
|
||
|
||
这个项目充满了对爱情的美好憧憬，每一个细节都经过精心设计，希望能为你的表白之路增添一份浪漫的色彩。无论是向心爱的人表达爱意，还是在特殊的日子里制造惊喜，这个应用都能成为你表达情感的完美工具。
|
||
|
||
愿所有的爱意都能被温柔以待，愿每一份真情都能得到回应。💖
|
||
|
||
---
|
||
|
||
*"我想你了" - 这简单的四个字，承载着最深的思念。* |