DevLog

快速体验

项目简介

记忆树是一个基于 Three.js 的 3D 沉浸式记忆空间，通过 174,000 个粒子构建梦幻星海，配合音乐播放和相册系统，打造专属的回忆空间。

技术栈

技术	用途
Three.js	3D 渲染引擎，处理粒子系统和几何体
React Three Fiber	Three.js 的 React 封装，声明式 3D 开发
@react-three/drei	常用 3D 组件（OrbitControls、useTexture、useVideoTexture）
Framer Motion	2D UI 动画（加载界面、弹窗过渡）
Lucide React	图标库（关闭、返回、音乐等图标）

项目架构

src/
├── app/memory-tree/page.tsx      # 页面入口，动态加载 3D 组件
├── components/blog/MemoryTree.tsx # 核心 3D 场景组件
└── config/photos.ts              # 相册数据配置

核心组件解析

1. 粒子系统（Particle Systems）

记忆树由多层粒子系统叠加构成，营造星空效果：

组件	粒子数	作用
ParticleWave	35,000	地面波浪，青紫双色交替，模拟海面波动
StarDust	5,000	星尘背景，三种纹理（星星、雪花、月亮）以不同速度旋转
EnergyBeam	18,000	能量光束，从树心向外发散的细小粒子
RadiantTree	95,000	树冠主体，6 层结构，粉白渐变
LuminousPedestal	9,000	底座光环，粉紫色旋转基座
KleinBottle	12,000	克莱因瓶装饰，青色渐变悬浮在树顶

总计约 174,000 个粒子，全部使用 AdditiveBlending 实现发光效果。

2. 音乐播放系统

内置音乐播放器，支持多首歌曲切换：

播放控制：播放/暂停、上一首/下一首
唱片机样式：旋转黑胶唱片效果，播放时发光
歌曲列表：默认包含 3 首歌曲，可自定义
键盘控制：空格键暂停/播放

3. 相册系统

支持多张照片组成的相册，点击可查看详情：

懒加载：基于距离的纹理加载，优化性能
相册弹窗：左侧照片轮播，右侧文字描述
缩略图导航：底部显示相册照片列表
键盘导航：左右箭头切换照片，ESC 关闭

4. 加载动画

采用模拟进度条 + 真实加载进度混合策略：

typescript
1// 模拟进度：2 秒内完成
2const t = Math.min(elapsed / 2.0, 1);
3const eased = 1 - Math.pow(1 - t, 3);
4
5// 超时保护：2.5 秒后强制显示
6const timer = setTimeout(() => setReady(true), 2500);

响应式设计

针对移动端做了专门优化：

配置项	桌面端	移动端
相机位置	`[0, 15, 80]`	`[0, 20, 100]`
视场角	42°	50°
DPR	1-1.5	1-1.2
自动旋转速度	0.3	0.15
最小距离	45	60
抗锯齿	开启	关闭（性能优先）

数据配置

相册数据在 src/config/photos.ts 中定义：

typescript
1export interface Album {
2  id: string;
3  title: string;
4  cover: string;
5  description?: string;
6  photos: { url: string; type?: "image" | "video"; rotate?: number; caption?: string }[];
7}
8
9export const ALBUM_DATA: Album[] = [
10  // 添加你的相册数据...
11];

照片路径建议放在 public/images/memory-tree/ 目录下。

性能优化

动态加载：使用 next/dynamic + ssr: false 避免服务端渲染
粒子复用：所有粒子使用 useMemo 缓存，避免重复计算
懒加载：照片基于距离加载，减少初始内存占用
移动端降级：关闭抗锯齿、降低 DPR、减少旋转速度
超时保护：2.5 秒后强制显示，避免白屏

交互说明

拖拽旋转：鼠标左键拖动视角（移动端支持触控）
滚轮缩放：调整与树的距离
点击照片：弹出相册详情（支持照片轮播）
音乐控制：点击唱片机按钮播放/暂停，左右箭头切歌
ESC 键：关闭预览弹窗
自动旋转：松手后缓慢回正

记忆树 — 3D 沉浸式记忆空间