我给女朋友做了个微信小程序：用 Three.js 在元宇宙里告白
我给女朋友做了个微信小程序：用 Three.js 在元宇宙里告白
📅 更新于 2026-05-12 | 🏷️ Three.js · 微信小程序 · 3D展厅 · 数字孪生
摘要：在微信小程序里跑 3D，听上去像天方夜谭。本文记录了我从零实现「元宇宙1314」3D 数字孪生展厅的全过程，涵盖展厅创建、编辑、预览、分享等功能，并分享了小程序与三维模型管理后台的联动设计，以及如何用非对称加密保障用户隐私。适合想在小程序里玩转 Three.js 的开发者参考。
一、缘起：想给“元宇宙”加点人间温度
在微信小程序里构建 3D 数字孪生应用，是我好几年的执念。经过漫长的技术积累，终于把一个能用的版本跑通了，并且成功上线。
小程序的名字叫 「元宇宙1314」，简介只有一句：“在元宇宙上爱我一生一世”。
灵感很简单：元宇宙这个词太冷了，我想给它注点人间烟火。就像钻石和婚姻的绑定一样，我把元宇宙和告白绑在一起——你可以在这里为自己和喜欢的人建一座 3D 展厅，装满照片和回忆，然后分享给对方。
主要目标用户：情侣、亲子、旅游爱好者，以及所有想用特别方式保存记忆的人。
📌 如果你也想做 3D 小程序，这篇文章会帮你省下不少摸索时间，建议先收藏。
二、主要功能一览
目前已完成的核心功能如下：
| 功能 | 说明 |
|---|---|
| 🏗️ 创建展厅 | 选模板 → 填名称 → 传照片 → 一键生成 |
| 📋 展厅详情 | 修改照片名称与排序 |
| ✏️ 编辑展厅 | 替换照片、修改名称 |
| 👀 展厅预览 | 3D 场景中全方位浏览照片，点击放大，点击名称跳转位置 |
| 🎁 展厅分享 | 将 3D 展厅分享给好友或伴侣 |
| 🗑️ 展厅删除 | 物理删除展厅数据 |
2.1 创建展厅：3 步拥有一个 3D 空间
- 首页点击右下角「+」浮动按钮，进入创建页
- 选择展厅模板（模板由后台 3D 场景管理系统统一配置）
- 输入展厅名称，上传喜欢的照片，点击保存——专属 3D 展厅立刻生成
模板决定了展厅的布局、光线和风格，未来会开放更多主题。
2.2 展厅预览：这是最让人“哇”的地方
点击预览按钮后，整个展厅会以 3D 场景 的形式呈现出来：
- 所有上传的照片被自动布置在 3D 空间里，仿佛一个虚拟画廊
- 手指滑动可以 360° 旋转视角，双指缩放可以走近或退远
- 点击照片会直接放大查看大图
- 点击照片下方的名称标签，镜头会自动飞到对应照片的位置，体验非常流畅
这就是 Three.js 在微信小程序里渲染的魅力——虽然目前界面还很朴素，但 3D 交互的底子已经打好了，接下来就是优化视觉和动画。
2.3 分享：把浪漫发给对的人
生成的展厅可以直接分享给微信好友。无论是告白、纪念日，还是亲子相册，这种「3D 空间」的分享比普通链接多了一层仪式感。收到的人打开就是你的专属展厅，不需要装任何 App。
三、安全设计：我自己也看不到你的数据
用户上传的照片，底层采用 非对称加密 方式存储。
这意味着什么？
- 私钥由用户端生成并持有
- 上传前文件已在本地加密，服务端只存储密文
- 即使是开发者（我本人），也无法解密查看用户的实际内容
这套机制设计之初就是为了避免隐私争议，毕竟照片是最私人的东西。
四、平台整体愿景：用《三维模型管理系统》驱动 3D 场景
「元宇宙1314」小程序只是前端触达用户的冰山一角，真正的引擎是背后的 《三维模型管理系统》。
两者的协作关系：
三维模型管理系统（后台）
↓ 配置场景模板
├─ 场景背景（天空盒/纯色/渐变）
├─ 光源（环境光/点光源/平行光位置与强度）
├─ 地面材质与颜色
├─ 模型布局（照片墙位置、展台形状）
└─ 用途标记：3D展厅模板
↓ 同步到小程序
「元宇宙1314」用户选择模板 → 创建展厅
text
后台可配置的参数包括：
- 模板封面图
- 是否允许分享
- 允许上传的照片数量上限
- 是否支持视频
这样一来，展厅模板完全可以由运营或设计人员通过后台可视化搭建，无需写一行代码。这就是我一直想实现的「零代码 3D 场景配置」。
五、当前局限与后续计划
写得诚实一点：现阶段界面确实还比较粗糙，性能在低端机型上也有优化空间。接下来重点做这几件事：
| 优先级 | 计划 | 说明 |
|---|---|---|
| 🔴 高 | 视觉升级 | 重新设计 UI 和展厅材质，摆脱“程序员审美” |
| 🔴 高 | 性能优化 | 低端机帧率提升，加载速度优化 |
| 🟡 中 | 更多模板 | 至少增加 5 套风格迥异的展厅模板 |
| 🟡 中 | 视频支持 | 展厅内播放短视频 |
| 🟢 低 | 音乐背景 | 浏览展厅时播放自定义背景音乐 |
结语
用 Three.js 在微信小程序里做 3D，每一步都是坑，也是成长。但当收到第一个用户说“我女朋友看到展厅哭了”的时候，我觉得都值了。
技术可能是冷的，但用它创造出来的东西，可以很暖。
👍 如果这个小程序的想法有触动你，点个赞支持一下独立开发者。
💬 你想用 3D 展厅做什么？告白、亲子相册、还是作品集？评论区聊聊，我来帮你挖掘玩法。
⭐ 收藏备用，下次做小程序 3D 项目时直接翻出来当避坑地图。
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
3
0- 0
已为社区贡献3条内容
所有评论(0)