返回
Featured image of post Signal Atlas:把真实网页放进 Three.js 工作站

Signal Atlas:把真实网页放进 Three.js 工作站

Signal Atlas v0.25.7 的开发复盘:如何在 MIT 开源工作站场景上实现原创复古桌面、CSS3D 网页投影、内嵌页适配与首屏优化。

现在打开 Signal Atlas,看到的已经不是最早那版项目卡片页,而是一台可以进入的 3D 工作站。外层场景来自一个 MIT 开源作品集,我保留了许可证和署名;显示器里的复古桌面、窗口系统、博客与八股文入口,以及两层页面之间的交互,是我按自己的内容重新实现的。

Signal Atlas v0.25.7 参考版工作站全景

这张图是 v0.25.7 生产版本的真实画面,不再使用旧版 Atlas 面板截图。现在的桌面只保留 Hugo 博客、八股炼丹炉、GitHub 和 QQ 这些真实入口,之前用来占位置的 My Showcase 和伪应用已经删除。

从“看起来很酷”到“真的能用”

最初做 3D 主页,想法很简单:普通项目卡片太像简历,我更想让访问者走到一台电脑前,再从电脑里打开我的内容。但真正开始接博客以后,问题就不再是“模型好不好看”,而是网站能不能顺利打开、显示器里的链接能不能点、滚轮会不会带着外层相机一起转。

Signal Atlas 现在由两种渲染技术协作,并为内嵌页增加一层按显示器几何定位的覆盖层。

WebGL 负责房间、电脑、光影与 CRT 效果;CSS3DRenderer 负责把可交互的桌面 DOM 放到显示器的位置。父页 Portal 又是独立于 3D 渲染器的真实 DOM,Vercel rewrite 只负责取回上游页面,不直接参与画面合成。网页没有被截成一张纹理,所以聚焦显示器后仍然可以点击、滚动和打开窗口。代价是每次相机移动、窗口缩放或发生遮挡,都要重新保证几层几何对得上。

聚焦后的 Signal Atlas 显示器

八股文内嵌页为什么最难处理

八股炼丹炉本身在另一个服务上。直接在浏览器打开时,它只需要面对一个正常视口;如果继续把它嵌套在 3D 桌面的 iframe 里,尺寸、裁切和跨域链路都会更复杂。

当前版没有在桌面里继续嵌套八股页。桌面只通过 postMessage 把窗口位置发给父页面,父页面再结合 CSS3D 锚点计算屏幕四角,用固定定位的 DOM Portal 承载真实 iframe,并裁切到显示器边界。窗口移动、缩放或页面恢复时会重新校正几何;单次加载超过 18 秒会进入失败处理,随后最多重试 2 次。Vercel 的同源 rewrite 负责把请求转到八股文实际服务。

这也解释了它为什么仍不可能做到百分之百稳定:如果八股文源站或 Cloudflare Tunnel 本身离线,外层工作站无法凭空把服务变可用。现在能做的是正确重试、恢复布局,并把“上游不可用”和“页面溢出”分开处理。

第一次进入为什么比普通博客重

3D 场景要加载模型、贴图、脚本和媒体,第一次访问天然比纯 HTML 博客更贵。v0.25.7 做了几件比较实际的事:启动阶段只等待 8 个关键资源;CRT 视频改为 preload="none",启动音和环境音只预读元数据,两段很短的鼠标音保留预加载;HTML 每次重新校验,而带版本号的 JS、CSS 和静态素材走长期缓存。浏览器从 BFCache 返回时也尽量恢复现场,不再完整重启一次。

这不会让 3D 首页变得和文字页一样轻,但能避免“为了等一段暂时用不到的视频,整个入口一直卡在 BIOS”。

哪些是开源基础,哪些是我做的

这部分我想写清楚,避免把“基于开源”说成“全部原创”。

  • 当前生产外层基于 Henry Heffernan 的 portfolio-website,使用其 MIT 许可的工作站模型、贴图、CRT 媒体和镜头表现,完整归因保存在仓库的 reference/NOTICE.md。
  • 上游另一个内层桌面仓库没有明确许可证,所以我没有复制它。显示器中的 linsk27 桌面、窗口管理器、应用入口和内容是重新实现的。
  • 仓库也保留了我自己用 Three.js primitives、Blender 脚本、manifest 和 Vue runtime 做的原创 Atlas 实验路线,但它不是当前生产首页的那套外观。
  • 参考版目前使用的 Windows 7 Harmony 壁纸不在项目 MIT 许可证范围内;如果要再分发或做二开,应先替换成有合适许可的自有素材。

所以更准确的说法是:它不是从零原创整套 3D 场景,也不是只换了名字的 fork,而是在有明确许可证的外层上重做内容系统、桌面交互和生产稳定性。

Signal Atlas v0.25.7 原创桌面与真实入口

开发过程中我会借助 AI 做代码检索、问题定位、重构建议和回归检查,但场景取舍、许可边界、功能验收和最终部署由我自己负责。尤其是这种同时涉及 WebGL、DOM 和外部服务的页面,AI 给出的“看起来合理”不等于浏览器里真的能用,最后还是要靠真实窗口、不同视口和失败场景逐项验证。

现在可以从哪里看

目前我更愿意把 Signal Atlas 称为一个持续迭代的作品集实验室,而不是适合所有人的主页模板。它有意保留 3D 的重量和仪式感,同时也必须接受一个现实:越接近真正可用的桌面,越需要在性能、嵌入稳定性和授权边界上做扎实的工程工作。

评论区 正在连接 GitHub Discussions…
使用 Hugo 构建
主题 Stack 由 Jimmy 设计