点一张卡片，走进一个 3D 世界：Three Small Worlds 把界面导航做成了传送门

点一张卡片，走进一个 3D 世界。三张卡片，分别标注 train cabin、flying circus、little tokyo。点击其中一张，镜头穿过卡片平面，滑进一个完整的 3D 场景。没有页面跳转，没有加载动画。卡片本身就是入口。

这是开发者 AmirMušić 的开源项目 Three Small Worlds。浏览器里放了三个可进入的 3D 世界，入口是三张卡片。火车车厢有木地板和窗外风景；flying circus 是一架黄色飞行器，悬在浅蓝色背景里；little tokyo 是带卡通熊猫的街景，有建筑、信号灯和电车。进入场景后可以自由浏览：拖拽旋转镜头，滚轮拉近拉远，按 Esc 或点击返回键回到总览，数字键 1、2、3 直接切换场景。

项目代码在 GitHub 开源，基于 pmndrs 的 Enter portals 示例，原作出自 Paul Henschel / drcmda。三个场景模型分别由 thomas.rynne、Mikkel Garde Blaase / plorigon 和 Glen Fox / glenatron 制作。应用代码采用 MIT 协议。模型各自保留授权：飞行器是 CC BY-NC 4.0，火车和东京场景是 CC BY 4.0。做商业改造前，先确认素材授权。原推文标注的灵感来源是 @0xca0a。

技术实现不复杂，但对开发者有几个值得看的细节。portal 混合（卡片到场景的过渡效果）、镜头过渡和所有交互逻辑集中在 src/main.jsx；场景的模型、标签、背景、卡片位置和模型变换集中在 src/scenes.js。GLB 文件（通用的 3D 模型格式）放进 public/models/，带动画的会自动播放，静态的保持静态。进入和退出场景时，同一个动画场景始终保持挂载，不会反复重建。模型、字体和 Draco 解码器（3D 模型压缩解码）都由应用自身提供，不需要外部 CDN。

运行需要 Node.js 22.12 或更新版本。npm ci --ignore-scripts && npm run dev 就能在本地跑起来。部署到 Vercel 不需要 API key 和后端。

这个项目更有意思的地方，是它作为“给 AI 代理的作业题”存在。仓库里写了 AGENTS.md、CLAUDE.md 和一份实施指南。用 Codex 或 Claude Code 打开仓库，粘贴这段话：

Run this project locally and show me the working example. Then help me replace its three scenes with my own GLB models. Handle setup and verification, preserve credits and licenses, and ask me for the files and visual choices you need. Keep everything local until I ask you to publish.

代理会先跑通示例，再等你提供 GLB 文件和视觉偏好。这种把代码同时写给人和 agent 的做法，正在成为开源项目的一种新分发方式。作者在推文里也建议直接在 Claude、Codex 或 Hermes 里测试。

需要说明白：这是个桌面优先的尝鲜项目，不是生产级组件。窄屏会裁掉两侧卡片，移动端性能取决于设备和模型，而且没有提供 WebGL 场景之外的无障碍替代方案。在线 demo 在 three-small-worlds.vercel.app。

这个项目不是孤立的。两天前，AmirMušić 刚发布过一份设计/动效工具清单，整理了 10 个他认为值得给 AI 代理使用的仓库，总 star 数号称超过 55 万。其中包括 85K star 的 Impeccable（用 62 条规则检查 AI 生成的界面，专门对抗 AI 味）、139K star 的 UI UX Pro Max（从一段项目简述生成完整设计系统）、32K star 的 MCP for Blender（让任意 LLM 直接驱动 Blender）、67K star 的 Remotion（用 React 写视频）。他在 Three Small Worlds 的推文下引用了这份清单，配文：More good stuff for your agents。

推文底下有人替 GPU 担心：点击卡片，等风扇转起来，再走进场景。作者回复：我道歉。做 VR 的网友从自己的经验出发：卡片到场景的过渡，成败取决于连续性。让一个元素，比如卡片封面那幅图，延续到 3D 空间里，眼睛才不会丢失位置。他还追问手机上的表现。也有质疑：demo 看着很酷，但每个卡片点击都加载一个 3D 场景，结果就是一个没人愿意滚动的列表。

这些质疑都成立。Three Small Worlds 更像一个方向验证，距离可直接复用的组件还有距离。它展示的交互思路是：点击可以是一次穿越，而不只是跳转。这个思路值不值得用，取决于你的内容能不能撑起一个完整的 3D 世界。