从三个平台的收藏夹出发，经过数据整理、审美调研、Blender 建模，最后得到一个可以拖动、可以拂雾、可以点击星辰跳回原帖的 3D 网页。这篇文章记录完整过程。

在线体验 →（项目页 →）（建议电脑端打开，戴耳机）

收藏星图最终效果

起点：收藏夹是最诚实的自我

我有一个习惯：看到好东西就点收藏。即刻 241 条、小红书 272 条、B 站 384 个视频。但我几乎从不回头看。

这些收藏其实是过去几年我的数字足迹——2021 年装修房子的功课、2019–2022 年学 Java 跳槽的教程、2024 年密集收藏的出海独立开发方法论、2026 年铺天盖地的 AI Agent 实操。收藏时间线比日记诚实。

于是我决定把它们”整理出来看看”。没想到最后做成了一张星图。

第一步：把收藏拿回来

难点在于：三个平台的收藏都是私密的，要登录态，而且小红书这类 SPA 页面对爬虫很不友好。

最后的方案是 OpenCLI——一个让 AI Agent 直接驱动你本机已登录 Chrome 的工具（Chrome 扩展 + 本地 daemon + CLI）。流程：

  • 即刻：页面 localStorage 里拿到登录 token，直接调官方接口 collections/list 分页拉全量，241 条一次拿全
  • 小红书：内置适配器的 saved 命令只返回 30 条，而我实际有 379 条收藏。于是改成浏览器滚动收割——自动滚屏 + DOM 增量去重，最终拿到 272 条（剩下的 107 条是已删除/不可见的笔记，计数还在但内容已不在）
  • B 站：最顺利，适配器直接支持收藏夹翻页，384 个视频（其中 52 个原视频已被删除，只剩死链）

然后让 AI 把 800 多条逐条读了一遍：归类到九个主题、写价值点、判断是否过时、推测我当时的收藏动机。中途它发现 51 条分析在合并文件时丢了，还自己去把丢失的条目补了回来。

第二步：先想清楚”好看”是什么

我有过几次教训：视觉项目仓促动手，很容易陷入反复修改的泥潭。所以这次先做侦察，再动手。

我翻遍了自己收藏过的优秀网站，又逛了十几个顶级个人站点（jesse-zhou.com 的拉面店、makemepulse、flareum.io 的日食……），最后确定了三个审美锚点：

  • jesse-zhou.com：单一主体聚焦 + 极致打磨 + 细致音效
  • ThreeUI 的 Sylva：薄雾、苔藓、浮尘，鼠标能拂动环境的”可触碰意境”
  • Shopify Editions Winter’26：文艺复兴油画 + 现代物件的文化碰撞

三者合成一个方向：一张活过来的文艺复兴星图——收藏是星座，古典星图的刻线质感是皮，雾气是活的。

先出风格帧确认方向，对了才往下走。第一版星盘太弱、第二版环太多太乱、第三版才定下来。中间还遇到”怎么改都没变化”的灵异现象，最后发现是浏览器缓存——如果当时凭感觉乱改，就陷进去了。

第三步：给星图造一台仪器

画面中央需要一台”主角仪器”。纯程序化生成的线框天球仪总差点意思——缺的是器物质感：黄铜的氧化、刻度的深浅、被人摸了几百年的包浆。

正好那几天 OpenAI 发布新模型，X 上刷屏的玩法是”AI 驱动 Blender 建模 + three.js 呈现”。我的环境里有 Blender MCP，于是直接让 AI 在 Blender 里建了一台黄铜天球仪：

  • 扁平黄铜子午带（外缘 36 颗刻度齿）、赤道环、23.5° 倾角的黄道环
  • 半环托架从下方承重（第一版犯了”柱子穿透球体”的物理错误，被我自己否掉重做）
  • 纤细轴杆、三层车削底座、做旧黄铜材质
  • Draco 压缩后仅 534KB，秒开

环的旋转动画在 three.js 里做，每根环以不同速度缓转。

第四步：让数据长成星星

800+ 条收藏全部映射成星：

  • 主题定位置：九大主题各成一个星座
  • 平台定颜色：即刻暖金、小红书绯红、B 站雾蓝
  • 点赞定亮度：越受认可的内容星越亮
  • 链接定坐标：每颗星的位置由其链接哈希决定——永远不变

悬停星星会浮出标题卡片，点击直达原帖。鼠标拂过，雾气会散开。

最后：一点仪式感

进入页面只有「入 境」两个字，点击进入，环境音缓缓响起——低频 drone、空气声、偶尔一声五声音阶的星音。所有音效都是 WebAudio 程序化合成的，整个网站没有加载任何音频文件。

这其实是从 jesse-zhou 偷师的：他的网站入口只有一个 START。这个设计顺带解决了浏览器禁止音频自动播放的限制。

我学到的事

  1. 收藏是意图的化石。整理收藏就是整理自己——我清楚地看到了自己从”学 Java”到”找出海”到”All in AI”的三次转向
  2. 视觉项目先出风格帧。方向错了改一行代码的代价，远小于做了两周再推翻
  3. AI 时代的新分工：数据整理、建模、写代码全部交给 AI，人负责审美判断和”这个不对”的直觉
  4. 渲染工艺我追不上顶级工作室，但数据是真的，人格是真的——这是只有我能做的东西

技术栈：OpenCLI（浏览器自动化）· Blender MCP（建模）· three.js（渲染）· WebAudio（音效）· 全部收藏数据本地存储