跳到正文
网页珍奇柜Web Curio

代码仓库美术馆

Git Gallery,William Welsh (usr-wwelsh),2026 年

正在布展…

原作直展:这是 William Welsh (usr-wwelsh) 的原始作品,按 MIT(three.js 为 MIT,Helvetiker 字体为 MgOpen 许可) 许可证收录(版本 76c8d64)。从源码构建,用原作自带的缓存脚本把本柜自己的 GitHub 账号(Exist-DireRaven)的公开仓库数据打包进去,离线运行。点击开始,WASD 移动,按住鼠标拖动转视角(展厅框架里不能锁定鼠标),T 打开房间目录。 许可证全文 · 收录说明

它是怎么做的

  1. 第 1 步通过 GitHub API 拉取用户仓库列表与贡献数据
  2. 第 2 步按仓库程序化生成房间与门户,进入时再懒加载 README 面板
  3. 第 3 步PointerLockControls + WASD 第一人称移动,手机用虚拟摇杆
  4. 第 4 步URL hash(#room/xxx)与相机位置双向同步

复刻配方

一段技术配方,可以直接交给 AI 编程助手,也可以自己照着写。想指定技术栈、位置和性能预算,就把它加入实现方案。

Fetch a list of items (repos, projects) from an API and lay them out as rooms along a corridor, computing room positions procedurally from the index. Render each item's text onto a CanvasTexture and map it onto a wall plane, loading it lazily when the player enters the room's bounding box. Use pointer-lock first-person controls with simple AABB wall collision. Sync the current room to location.hash so rooms are deep-linkable, and teleport the camera when the hash changes.

档案

技术

能不能拿来用

原作以 MIT 许可开源:可以阅读源码学习,按许可证条款使用;在自己的项目里引用时保留原作者署名。

性能开销

视觉强度

实现难度

尺度为策展判断(1 到 5),用于比较和推荐。

核实记录:Demo loads (title 'Git Gallery', three.js canvas); repo has MIT LICENSE.