相册展示效果及源代码说明
事情是这样的，上月底接到一个任务：家人10周岁生日宴，需要做一个从出生开始的成长纪念视频。
我原以为照片数很少，找个剪映模版套一套，1分钟怎么着也够了，事实上，我打开电脑看到4个文件夹里躺着几百张照片……傻眼了，而剪映里搜索“相册”出来的模板基本是15-20秒，最长也就1分钟。
更麻烦的，即便用多个模板凑下时长，这么多张横竖比例不同的照片，替换素材和调整比例，还要机械式的耗费大量时间，最后观感也不一定好。
有什么好的办法？
想起以前有3D展示相册的网页，百度了一圈没有发现好的，又去GitHub上搜了一圈，也没有适合的。（截图第一个是我后面上传的本文实现的代码，欢迎下载随便魔改使用）
那怎么办呢？
既然作为一个野生的AI科普博主，我秉持万事用AI的原则，我决定用AI来解决。
碰巧Kimi2.5上线，吹爆了它的前端网页生成的能力，我也简单试了下。
输出的结果差强人意，而且照片加载不了，再要修改也很麻烦。回看了Kimi官方给出的网站案例，我认为是我的提示词太简单，于是让Kimi给我输出一套提示词。
请帮我创建一个十周岁生日宴照片自动播放网站，要求如下：
一、项目结构与技术栈
使用纯 HTML + CSS + JavaScript，单文件实现（index.html）
使用 Three.js 实现 3D 照片墙背景效果
使用 GSAP 或纯 CSS3 实现高级转场动画
使用 Web Audio API 实现背景音乐控制
二、照片文件夹结构（相对路径）
网站将放在照片文件夹内，要求自动识别以下四个子文件夹：
photos/
├── 婴幼儿期/
├── 幼儿园时期/
├── 小学时期/
└── 十岁艺术照/
三、核心功能逻辑
1. 照片扫描与加载
页面加载时自动扫描上述4个文件夹
按顺序（婴幼儿期→幼儿园时期→小学时期→十岁艺术照）加载所有照片
生成照片路径列表供后续轮播使用
2. 3D 背景墙效果
使用 Three.js 创建 3D 空间
将所有照片作为纹理贴图，以随机位置、随机角度分布在 3D 背景中（形成"照片云"效果）
背景照片带赛博蓝紫光晕光效（#00d4ff 青色 + #ff00ff 洋红色辉光）
背景照片缓慢自动旋转浮动，营造空间感
3. 主照片展示区（C位）
从照片列表中按顺序抽取一张照片
根据照片实际比例（横向/纵向/方形）自适应居中展示
容器比例：最大宽度 70vw，最大高度 75vh，保持原图比例
4. 3D 运镜与展示动画（每张照片随机选择一种）
推镜效果：从远处推近到面前（Z轴位移）
旋转入场：Y轴旋转 90°→0° 翻转出现
缩放绽放：从 0.3 倍缩放到 1 倍 + 轻微弹性回弹
悬浮环绕：照片轻微上下浮动 + 鼠标移动视差效果
光效扫过：赛博紫光从左扫过照片表面（sheen效果）
5. 文字介绍区
位置：照片下方或右侧（根据照片比例自适应）
内容格式：「婴幼儿期 · 第 3 张」+ 可配置的描述文字
样式：科技感无衬线字体，青色发光字，透明毛玻璃背景卡片
6. 赛博朋克视觉风格
背景：深黑 (#0a0a0a) 到深蓝紫 (#1a0a2e) 渐变
光效：照片边缘青色/紫色霓虹光晕（box-shadow 模拟）
网格地面：可选的透视网格线增强空间感
粒子效果：可选的浮动光点（Fireflies）
四、交互与播放控制
自动播放：每张照片展示 4-6 秒（可配置），自动切换下一张
播放顺序：严格按四个相册顺序，每个相册内照片按文件名排序
音乐控制：左下角悬浮音乐按钮，点击播放/暂停本地音频文件（bgm.mp3）
进度提示：右上角显示当前相册和总进度（如「小学时期 12/45」）
五、技术细节要求
照片路径处理：使用相对路径
./婴幼儿期/xxx.jpg，确保放到任何照片文件夹都能运行
比例适配：
横图（宽>高）：左右留黑边，上下撑满
竖图（高>宽）：上下留黑边，高度最多 75vh
方图：居中展示
内存管理：所有照片预加载，切换时无白屏/闪烁
无滚动条：固定 16:9 视口，
overflow: hidden，全屏适配
六、代码结构参考
<!DOCTYPE html>
<html>
<head><!-- 引入 Three.js、GSAP --></head>
<body>
<!-- 3D Canvas 背景层 -->
<!-- 主照片展示层 -->
<!-- UI 文字层 -->
<!-- 音频控制层 -->
<script>
// 1. 扫描四个文件夹生成图片数组
// 2. 初始化 Three.js 背景照片墙
// 3. 照片轮播逻辑 + 动画
// 4. 音乐播放控制
</script>
</body>
</html>
请直接输出完整可运行的 HTML 代码，确保我保存到照片文件夹后，双击打开就能自动加载四个相册的照片并正常播放。
---
## 优化要点说明
| 维度 | 优化策略 |
|------|----------|
| **技术栈明确** | 指定 Three.js + GSAP，避免使用不稳定的自制方案 |
| **路径清晰** | 相对路径写法确保跨设备可用 |
| **动画具体化** | 给出4种具体运镜方案，减少 AI 自由发挥空间 |
| **视觉规范** | 指定色值（#00d4ff/#ff00ff）避免"赛博朋克"语义模糊 |
| **顺序严格** | 强调四个相册的先后顺序，符合成长叙事逻辑 |一顿操作猛如虎，一看结果如下图，交互体验卡顿、照片显示不出、音乐播放不了……想再次修改，依然不行。
想一次成型是不行了，于是我想Vibe Coding多次口喷的方式来实现。
反正TARE国际版领了福利，还能免费薅一段时间。
于是，我把前面的提示词复制粘贴给了TARE，选择推荐的Google Gemini-3-Pro-Preview 跑了11个版本后，才基本得到一个雏形。
分享下我Vibe Coding口喷的基本心法是：
知道你想要的是啥，然后哪里不会问哪里，哪里不对改哪里……
后面就是调整优化，最后一句心法是哪里不爽改哪里。
比如，给照片自动加载了很多滤镜，显示的照片变得苍白。
比如，部分照片由于格式问题，中间会存在显示出错的情况，需要找到这些照片进行格式转换，保证每张照片能正常显示。
再比如，照片文件夹更换照片或调整命名后，重新启动需要更新照片排序数据。
因为4个文件夹分别对应不同阶段，而且每张照片按照从小到大的顺序做了排列，因此，相册需要严格按照成长顺序播放。
所以，回看开头截图，让AI写了data.js文件用于存放不同文件夹的照片数据，包括路径名称、宽高像素以及是否选择。
用于规定照片展示顺序。
另外，还有win系统的更新照片.bat和mac系统的更新照片.command命令文件，用于调整相册照片后，更新data.js文件。
一个很重要的细节需要注意：
相册的照片比例是随机横版或竖版的，怎么办？
自从智能手机普及，我们日常拍摄的照片主要是竖版构图，横版构图很少。（也提醒我们日常记录，多存些横版构图的照片，以后很珍贵）
为了让相册展示效果更好，于是我设置了一个规则，横版照片单次只播放1张，但如果遇到竖版照片，可随机播放2-3张照片，如果前后仅有1张竖版的除外。
还有一个很重要的细节需要注意：
横版构图但人物不是站立的情况，要提前旋转后保存。
基础的功能完成后，就是给网页美化，做点锦上添花的事。
比如，给网页增加些随机散落蛋糕、烟花的效果。
照片未出现前，原背景显得单调呆板，于是我又选了张横版照片添加毛玻璃效果作为整体的背景，按比例适配窗口确保不变形。
当然，还可以显示4个相册的缩略图支持选择不同相册开始播放；还考虑到想暂停欣赏某些特殊的照片，我增加了一个暂停/播放案例。
所有功能完成后，我让TRAE更新了README文件，详细的说明有兴趣的可以下载查看。
项目源码地址https://github.com/zilutang-ux/Birthday-Album.git
方便演示，我用扣子生成了100张儿童照片放到对应文件夹。
请生成100张亚洲小女孩从出生到10岁不同年龄段、不同场景的照片，具体要求如下：
- 年龄覆盖：需涵盖从新生儿（0-1个月）到10岁儿童的各关键成长阶段（建议每1-2岁设置一个年龄段节点）
- 场景多样性：包括但不限于家庭生活、户外玩耍、学习场景、节日庆典、运动活动、自然探索等真实生活情境
- 构图比例：随机分配横版（16:9/4:3）和竖版（9:16/3:4）照片比例，确保视觉多样性
- 细节要求：人物表情自然生动，服装符合年龄特征与季节变化，背景环境真实且富有生活气息
请确保所有生成内容符合儿童保护原则，展现积极健康的成长状态。看到这里，win系统点击start_win.bat，mac系统点击start_mac.command命令文件启动终端后，会自动打开浏览器开始照片播放。
So, Enjoy！可以直接在电脑用浏览器打开投屏，也可以录屏后再用剪辑软件加上片头、字幕和配乐等。
再说几个注意细节：
1.照片命名：建议按照1、2……N的顺序命名；
2.照片旋转：提前将人物倒着的照片旋转站立；
3.图片压缩：单张图压缩在5MB内，提高加载速度；
4.检查格式：转为统一的jpg/png格式，确保照片无损坏。
以上，是今天的分享，欢迎下载源码迭代功能后，来评论区交流。
最后，希望大家训练AI思维，万事用AI。
我是子路关注@子路AGI之路，分享我创业聚焦AI的心法和技法，我们一起拥抱AGI