Claw3D 3D办公室是如何炼成的Three.js与React Three Fiber场景实现揭秘【免费下载链接】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/Claw3DClaw3D是一个开源的 3D 虚拟办公室专为 AI Agent 团队打造。它基于 Three.js 与 React Three Fiber 构建让你在浏览器里走进一间实时 3D 办公室亲眼看着 AI 员工走动、开会、写代码、打乒乓球。本文将带你快速看懂这套 3D 办公室场景的核心实现原理不涉及复杂代码只讲清楚思路。 先认识主角什么是 Claw3D 3D办公室Claw3D 的定位是AI 团队的办公室——Gateway 只是控制平面真正的产品是这间办公室/office路由进入复古风的 3D 办公室AI Agent 以员工身份出现/office/builder路由拖拽编辑办公室布局并发布支持 OpenClaw、Hermes、Custom HTTP 和内置 Demo 四种运行时后端你可以把它理解为一个给 AI 看的工位模拟器每个 Agent 有桌位、有日程、有走位还有保洁机器人Janitor打扫场地。核心场景代码集中在 RetroOffice3D.tsx 这个入口组件里。 技术栈Next.js Three.js React Three FiberClaw3D 的 3D 场景不是从零手写的渲染器而是站在成熟生态的肩膀上技术版本作用Next.js16.x应用框架、路由/office页面three0.183WebGL 渲染底层react-three/fiber9.x用 React 声明式地写 Three.js 场景react-three/drei10.x现成的 3D 组件OrbitControls、Environment 等依赖声明见 package.json。React Three Fiber 的价值在于场景就是一棵 React 组件树——一张桌子是一个组件、一扇门是一个组件、Agent 也是一个组件状态变了 React 自动帮你更新网格不再需要手动管理对象的生命周期。 从 2D 坐标到 3D 世界办公室是怎么量出来的这套实现最巧妙的地方之一是办公室先用2D 坐标系设计再投影到 3D 空间。在 constants.ts 中定义了办公室的图纸CANVAS_W / CANVAS_H 1800逻辑画布宽 1800 单位2D 坐标SCALE 0.018把 2D 坐标缩放到 3D 世界坐标toWorld变换见 geometry.tsWALK_SPEED、AGENT_RADIUS等行走速度、碰撞半径等物理参数这样做的好处是寻路、家具摆放、布局保存全部用简单的 2D 数据完成渲染层只负责按图纸搭房子。环境地板、墙、墙上挂画在 environment.tsx 中组装连一面带框的美国国旗挂画都是用planeGeometry一片片拼出来的。 Agent 如何走路A* 寻路与导航网格办公室里 AI 员工会绕开桌椅走到目标位置背后是一套经典的A* 路径规划建网格buildNavGrid 把办公室切分成 25 单位见方的小格子用Uint8Array标记哪些格子被家具挡住。哪些家具挡路由元数据统一声明新增装饰物默认不挡路避免误伤。跑寻路astar 用二叉堆实现优先级队列在网格上搜索最短路径如果起点恰好压在障碍上还会自动找最近的可走格。每帧驱动场景钩子useAgentTickRetroOffice3D.tsx在每一帧把路径转化为具体移动Agent 到达桌位后会粘在工位上DESK_STICKY_MS。导航网格只在家具数组变化时才重建寻路开销被压到最低——这是 3D 场景里多 Agent 同屏不卡顿的关键之一。 28 种家具与性能优化实例化渲染打开布局面板你会看到 Wall、Desk、Couch、ATM、Jukebox、乒乓球桌等 28 种家具PALETTE定义见 RetroOffice3D.tsx。如果办公室摆了 50 张桌子难道发 50 个绘制调用吗Claw3D 的答案是Instanced实例化渲染桌子、椅子、墙这类量大且形状相同的家具走InstancedFurnitureItems/InstancedWallSegments组件一个 Draw Call 画完所有实例模型资源是本地.glb文件存放在 public/office-assets/models/furniture/浏览器按需懒加载布局数据通过 persistence.ts 保存到本地刷新页面办公室还是老样子另外还有一个隐藏的性能管家——AdaptiveDprController它持续监测帧间隔卡顿时自动降低渲染分辨率DPR 最低到 0.85流畅时再升回来页面切到后台还会主动降载。这对浏览器 3D 应用来说是非常实用的自适配策略。️ 交互与事件驱动办公室为什么活了静态场景不稀奇会动才是 3D 办公室的灵魂。Claw3D 做了三层事情相机系统OrbitControls自由旋转 预设机位动画cameraLighting.tsx还能一键进入跟随 Agent视角拾取交互FloorRaycaster 把鼠标射线投射到地面平面实现点哪里走到哪里和家具摆放事件驱动OfficeScreen.tsx 通过 GatewayClient 连接后端收到 Agent 状态事件聊天、开会、跑任务后转化为 3D 世界里的行为——站会时全员走向会议桌、Agent 打乒乓球时球真的会在物理规则下弹跳这就是Gateway 只是控制平面产品是办公室的含义后端的事件流最终都变成 3D 空间里看得见的动作。多楼层、分区本地办公室 远程办公室区域等更完整的架构思路可以阅读 docs/multi-floor-runtime-architecture.md。 动手体验一键跑起 Claw3D 3D办公室git clone https://gitcode.com/gh_mirrors/cl/Claw3D cd Claw3D npm install cp .env.example .env npm run dev打开http://localhost:3000选择Demo后端模式即可不依赖任何 Agent 框架直接逛办公室接入真实后端则填入 Gateway 地址与 Token。要求 Node.js 20 / npm 10。 源码导航速查想看什么去哪里3D 场景总装入口src/features/retro-office/RetroOffice3D.tsx办公室尺寸与物理参数src/features/retro-office/core/constants.tsA* 寻路 导航网格src/features/retro-office/core/navigation.ts地板、墙壁、挂画src/features/retro-office/scene/environment.tsx家具 3D 模型组件src/features/retro-office/objects/相机与光照系统src/features/retro-office/systems/cameraLighting.tsx办公室页面与网关接线src/features/office/screens/OfficeScreen.tsx整体架构文档ARCHITECTURE.md✅ 小结Claw3D 的 3D 办公室给前端 3D 学习者上了三堂好课2D 数据 3D 渲染分离布局、寻路全部用轻量 2D 数据表达渲染层只管展示React 声明式管 3DReact Three Fiber 让组件化思维直接迁移到场景搭建性能意识贯穿始终实例化渲染、懒加载网格、自适应分辨率一个都没少。看懂这套实现你就掌握了用 Three.js React Three Fiber 构建多人实时 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考