abearxiong/xhs-think-you

Fork 0

generated from template/astro-simple-template

Files

abearxiong 5a4d9c973e readme.md

2025-10-23 12:43:06 +08:00

4.1 KiB

Raw Permalink Blame History

💖 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: 静态站点生成器

📱 使用方法

启动项目:
```
pnpm dev
```
访问页面:
- 主页: http://localhost:4321/
- 演示页: http://localhost:4321/demos/base
控制操作:
- 使用左侧控制面板调整各种参数
- 使用键盘快捷键进行快速操作
- 右侧信息面板显示当前效果说明

🎯 使用场景

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

🛠️ 自定义配置

消息内容

在 generateMessage 函数中修改 messages 数组来自定义表白文字：

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

颜色主题

在 createTextGeometry 函数中修改颜色配置：

// 边框颜色
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     # 演示页面

💝 特别说明

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

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

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

4.1 KiB Raw Permalink Blame History Unescape Escape