企业官网建设流程全解析

Claw3D零基础上手：10分钟跑通你的第一个AI Agent 3D办公室

【免费下载链接】Claw3DClaw3D is an open source 3D engine built on OpenClaw for creating games, simulations, and high-performance 3D applications.项目地址: https://gitcode.com/gh_mirrors/cl/Claw3D

Claw3D 是一个开源的 AI Agent 3D 办公室工具：它把你在日志和仪表盘里"看不见"的 AI 智能体，变成一间可以走进去的 3D 虚拟办公室。你的 Agent 会以员工身份出现在工位上协作、聊天、汇报。本文是一份零基础上手指南，10 分钟带你跑通第一个 AI Agent 3D 办公室，全程只需要 Node.js 环境，无需任何 AI 框架账号。

Claw3D 是什么：给 AI 团队造一间办公室

一句话理解 Claw3D：

AI 智能体是"员工"，Claw3D 是它们的"办公室"。

传统的 AI Agent 工作流靠终端日志观察，而 Claw3D 把整个过程空间化：

• 🕹️ 实时 3D 复古办公室，Agent 以"员工"形象出现在工位上活动
• 💬 每个 Agent 都可以直接聊天，支持流式回复
• 📋 支持站会、代码评审、任务看板等沉浸式操作场景
• 🔌 即插即用的运行时：OpenClaw、Hermes、自定义 HTTP 后端，以及内置演示网关（零配置）

项目定位为"可视化与交互层"，本身不训练模型，而是连接一个已经运行的 Agent 后端。对新手最友好的地方在于：内置的 Demo 模式可以完全离线体验整套 3D 办公室，这正是下面 10 分钟教程要走的路。

环境准备：只需 Node.js 20+

Claw3D 的技术栈是 Next.js + React + Three.js（见 package.json），对新手非常友好：

⚠️ 注意：Claw3D 不会替你安装 OpenClaw 或 Hermes。想体验真实 Agent 运行时再按 TUTORIAL.md 部署，本文用演示模式即可。

10分钟跑通教程：四步启动你的 AI Agent 办公室

第一步：克隆仓库并安装依赖

git clone https://gitcode.com/gh_mirrors/cl/Claw3D claw3d cd claw3d npm install

第二步：启动演示网关（关键！）

Claw3D 内置了一个 Mock 网关（server/demo-gateway-adapter.js），预置了三位"同事"：Avery（协调者）、Mika（研究员）、Rune（构建者）。在另一个终端运行：

npm run demo-gateway

它会在18789端口启动一个模拟网关，提供演示 Agent、流式聊天和办公室在场状态。

第三步：启动 Studio 主程序

npm run dev

然后打开浏览器访问http://localhost:3000。首页会自动重定向到 3D 办公室页面（src/app/page.tsx），这就是你的 AI Agent 3D 办公室。

第四步：连接演示后端

在连接界面中：

1. Gateway URL 填入：ws://localhost:18789
2. 后端模式选择Demo backend
3. 点击Connect

连接成功后，你就会看到办公室里的"员工"们出现在工位上。直接和他们聊天试试——Avery 会回复"Demo office is live and the team is synced"，Mika 和 Rune 也会以各自的角色人设回应（逻辑见 buildDemoReply）。

办公室导览：你的 AI Agent 能做什么

连接成功后，整个 3D 办公室就是你的控制台：

• 看工位：每个 Agent 都有自己的名字牌和状态（IDLE / RUNNING / THINKING），谁在干活一目了然
• 发起站会：办公室内置站会工作流，Agent 可以自动汇报进度（见 meeting-room-workflow-spec.md）
• 评审代码：在沉浸式界面里浏览 GitHub PR 和 Diff（src/features/office/screens/github/）
• 布置任务：通过聊天面板直接给 Agent 派活，流式回复实时渲染
• 训练技能：在"健身房"里给 Agent 培训新技能，用技能市场安装扩展（skills-overview.md）

进阶：连接真实的 AI Agent 运行时

玩熟悉演示模式后，可以随时切换到真实后端。Claw3D 支持四种运行时档案（docs/runtime-profiles.md）：

接入真实 OpenClaw 时只需两步：在连接界面填入 Gateway URL 与 Token，然后在网关主机上批准设备配对：

openclaw devices approve --latest

完整的跨机器部署方案（OpenClaw + Tailscale + Claw3D）请参考 TUTORIAL.md。

常见问题排查：连接失败的三个原因

如果页面能打开但 Connect 失败，按 README.md 的排查清单检查：

1. EPROTO/wrong version number→ 对非 TLS 端口误用了wss://，本地演示请保持ws://localhost:18789
2. 协议版本错误（minProtocol/maxProtocol）→ 网关太旧，升级 OpenClaw 或直接用npm run demo-gateway
3. 401 Studio access token required→ Studio 开启了访问令牌保护，检查 Cookie 配置

架构上，浏览器只和 Studio 通信，由 Studio 服务器侧再连上游网关（server/gateway-proxy.js），所以ws://localhost:18789指的是Studio 所在机器能访问的地址，而非浏览器设备——这是新手最容易踩的坑。

小结：从零到 AI Agent 3D 办公室

回顾一下你刚刚完成的 10 分钟：

1. ✅ 克隆仓库，npm install装好依赖
2. ✅npm run demo-gateway启动内置演示网关
3. ✅npm run dev启动 Studio，打开http://localhost:3000
4. ✅ 连接 Demo backend，和你的三位 AI 同事在 3D 办公室里见面

Claw3D 的核心价值在于让 AI Agent 的工作变得可见——用空间、运动和"在场感"代替枯燥的日志。更多方向可以看 VISION.md 与 ARCHITECTURE.md。现在，你的 AI Agent 3D 办公室已经开张，去给它招个新同事吧！

【免费下载链接】Claw3DClaw3D is an open source 3D engine built on OpenClaw for creating games, simulations, and high-performance 3D applications.项目地址: https://gitcode.com/gh_mirrors/cl/Claw3D