一、它是啥:把仓库变成可旋转的 3D 沙盘,像玩策略游戏一样管物流

brief 一句话:当仓库变成可旋转的 3D 沙盘,每一辆货车、每一个托盘都在你的视野里实时呼吸——左边调度仪表盘、中央 3D 仓库、右边实时地图 + 数据表,能把「进/出货、跨仓调拨、配送 ETA」摊成一张能实时看的全景图。它出自 Anthropic 旗舰模型 Claude Opus 5.5 上线后的「纯代码创作潮」:网友让 Opus 5.5 直接用代码手搓一整套仓库物流运行系统,不用现成图片/视频素材,物流场景一点点被写出来。

先按数据红线实查现状(2026-10-04 查):

  • 它属于哪个事件:量子位 / 大模型智能 / AGI Hunt 等多家 2026-09 报道了「Opus 5.5 上线即被玩坏」——纯代码直出 78 秒动画、3D 城堡代际 PK、吉卜力风水下火车、马里奥赛车味 3D 卡丁车,以及「手搓一整套仓库运行系统,JavaScript+SVG,没有图片视频,也没调用 3D 模型库」。仓库物流这套正是这场创作潮里偏「工程化」的代表玩法。
  • 关于 Opus 5.5 本身:媒体报道口径——代码 / 知识工作等多项基准登顶,输出速度比上一代 Opus 5 快 37%、价格比 Opus 5 降 42%、性能追平 Fable 5.1;API 价约 $4/M 输入 + $20/M 输出(多家媒体口播值,非审计数字,我如实标注为来源口径)。同期发布的 Grok 4.7 则沦为背景板。
  • 关键差异(红线):原报道明写是 JavaScript + SVG 的 2D 物流系统(「没调用 3D 模型库」);而 brief 标题/金句说的是「3D 虚拟仓库 / 可旋转 3D 沙盘」。这两者有出入——本文按 brief 的「3D」诉求展开,并把「原推文是 2D 的 SVG、这里的 3D 是我按 brief 自研的最小沙盘」这条差异写进正文,不混为一谈。

仓库名「Riverside / Southfield / Eastport / Westgate」:这是 brief 给的四仓示意名。我用公开渠道(Web + GitHub API)去溯源,没有找到能对应的公开 demo 或仓库(GitHub 搜 warehouse svg opus / warehouse logistics threejs opus 全空),原推文 demo 代码没有进 git。所以这四个仓名我当成 brief 的示意设定用,不挂任何假链接,正文里也如实标注「未能在公开源核实」。

二、机制:一张 3D 沙盘为什么能「像策略游戏」

把仓库做成 3D 沙盘,本质是把「物流状态」从一张张报表/工单,翻成空间坐标 + 实时对象。brief 给的核心分点三条,我拆成沙盘要同时具备的三件事:

① 可视化调度(空间即信息)。 左边调度仪表盘放全局 KPI(在途货车数 / 在库托盘 / 订单准时率 / 跨仓调拨单量),中央是可旋转的 3D 仓库群,右边实时地图叠数据表。三个视图不是割裂的:拖一下 3D 沙盘转到某个仓,左边 KPI 和右边数据表跟着聚焦到那个仓——「我在看哪个仓」这件事本身被可视化了,调度就不再是「切七个 tab」。

② 资产全链路追踪(对象会呼吸)。 brief 写「每一辆货车、每一个托盘都在视野里实时呼吸」——落地就是:站点(sites)→ 货车(trucks)→ 叉车(forklifts)→ 托盘(pallets)→ 订单(orders) 五层对象全部进 3D 场景,每个对象带实时属性(位置 / 状态 / 归属单号)。托盘不是死方块,是跟着订单走的小块,车一来就变「卸货中」,被叉到货架就变「在库」。一层穿透一层:点一个订单能反查出它现在挂在哪个托盘上、由哪台车拉着、几点到哪个仓。这就是「呼吸」——不是动画好看,是数据在实时流。

③ 多仓协同(网络而非孤岛)。 brief 点名 Riverside / Southfield / Eastport / Westgate 四个 hub,支持跨仓调拨(cross-warehouse transfers)+ 配送 ETA。沙盘的价值恰恰在「多仓」上:单仓用一张平面图就够,多仓协同才需要一张能看「调拨流向」的 3D 网——哪个仓缺哪个仓补、一单货走哪条干线、几点的 ETA,都在同屏。仓之间画连线、线上跑调拨的「脉冲点」,就把它变成了策略游戏里的「势力图 + 补给线」。

三、机制落到代码:一张 3D 沙盘怎么搭(自研最小沙盘 · 可跑)

原推文 demo 没有公开仓库可 clone,所以我按 brief 的三个核心,自己写了一个最小可跑的 Three.js 沙盘(单文件、约 200 行,深色科技风呼应本站品牌紫 #6c4dff),本地无头浏览器真跑截了两张图——这是我按 brief 自研的最小沙盘,不是原推文那个 demo,别当原作的复现。它刻意做满 brief 的三件事:四仓 + 货车 + 托盘 + 跨仓调拨线 + 配送 ETA 面板。

按 brief 自研的 Three.js 3D 仓库沙盘(本地无头浏览器真跑 1920×1080):中央 DISPATCH 调度中枢 + 四角 Riverside/Southfield/Eastport/Westgate 仓站,仓间调拨线上跑橙色货车与脉冲点,紫色托盘散落各仓,左右悬浮玻璃面板给 KPI / 实时仓站数据 / 配送 ETA
按 brief 自研的 Three.js 3D 仓库沙盘(本地无头浏览器真跑 1920×1080):中央 DISPATCH 调度中枢 + 四角 Riverside/Southfield/Eastport/Westgate 仓站,仓间调拨线上跑橙色货车与脉冲点,紫色托盘散落各仓,左右悬浮玻璃面板给 KPI / 实时仓站数据 / 配送 ETA
同一沙盘的另一角度:可见仓站「建筑群」(主楼 + 侧翼 + 货架层 + 发光屋顶条 + 光晕地面),体现「多仓协同」的空间网络感
同一沙盘的另一角度:可见仓站「建筑群」(主楼 + 侧翼 + 货架层 + 发光屋顶条 + 光晕地面),体现「多仓协同」的空间网络感

骨架就这几行,读懂它「为什么这么做」比抄它更值钱:

// 1) 四仓 = 位置 + 专属色,一个 hub() 建「建筑群」(主楼+侧翼+货架+发光顶条)
const hubs = [ hub(-58,-46,0x4d9dff,'Riverside'), hub(58,-46,0x5be0a0,'Southfield'),
               hub(58,46,0xffb24d,'Eastport'),    hub(-58,46,0xff6bd6,'Westgate') ];
// 2) 中央调度中枢 DISPATCH + 垂直光柱,四条 spoke 把四仓拉到中枢 (hub-and-spoke)
hubs.forEach(h => scene.add(line3(h.position, CENTER, 0x8f8ff0, .45)));
// 3) 调拨 = 货车沿 spoke 往返, t 在[0,1]内折返, 车头自动转向行驶方向
trucks.forEach(t => { t.t += .0035 * t.spd * t.dir; if (t.t>=1||t.t<=0) t.dir*=-1;
  t.g.position.copy(lerp3(t.a,t.b,t.t)); t.g.rotation.y = Math.atan2(dx, dz); });
// 4) 全链路追踪 = 每个订单最终落到「某个托盘」这个 3D 对象上, 点它反查车/仓/ETA

关键点:「像策略游戏」的体感不是靠 3D 好看,而是「对象带实时属性 + 空间坐标」——货车沿调拨线往返、脉冲点在 spoke 上跑、托盘散落在仓边,这些全是一条 requestAnimationFrame 里把 t(进度)折返 + 位置 lerp 出来的。你要做真系统,就把这里的「折返进度」换成真实的车队 GPS 流,把「散落托盘」换成 orders→pallets→trucks→sites 的关联查询,沙盘就成了活的调度台。

四、横向对比:3D 沙盘 / 2D SVG / 传统 WMS 大屏 / 数字孪生

路线它给什么强何时别用
Opus 5.5 纯代码 3D/2D 沙盘(本文)一个可跑 HTML,仓/车/托盘/调拨/ETA 全进同屏快、可交互、能边生成边改;brief 的「策略游戏感」最直接是一次性 demo,要上生产得补数据源 + 权限 + 并发
原推文 JS+SVG 2D 版纯 SVG 画的物流运行场景更轻、无 WebGL 依赖、移动端友好;媒体确认这是原作形态空间纵深弱,「可旋转 3D 沙盘」的体感不够
传统 WMS / TMS 大屏固定报表 + 地图 + 工单流能落地、有权限/审计、真数据看「跨仓调拨流向」往往要切多个 tab,缺一张同屏 3D 网
数字孪生(UE5/Blender 渲染)高保真 3D 孪生体视觉最强、可仿真重、贵、周期长;做个「调度台」用它有点杀鸡用牛刀

一句话定位:纯代码沙盘是「概念验证 + 快速原型」阶段最划算的一环——一天搭个能转着看、能点着的调度台,比先上一套数字孪生快得多;真要走生产,再把 3D 沙盘当 UI 皮、底下接真实车队 GPS + 库存 + 订单 API,而不是拿 demo 直接扛生产。

五、坑与边界(红线,别照搬旧文案)

  • 3D vs 2D 是最大误区:brief 说「3D 沙盘」,但媒体实报原作是 JS+SVG 的 2D 系统(「没调 3D 模型库」)。别把「2D SVG 原作」和「3D 沙盘」当同一个东西——要 3D 体感,得用 Three.js/WebGL 自己搭(本文沙盘就是这么补的)。
  • 四仓名「Riverside/Southfield/Eastport/Westgate」我无法在公开源核实,是 brief 的示意设定;写进系统前先确认真实仓名/坐标,别把示意名当生产数据。
  • 原作 demo 没有公开仓库可 clone(GitHub 搜不到),代码没进 git,只能「按 brief 重写」——别期待能直接拷过来用。
  • 单模型 3D 的天花板:一次让 LLM 直出完整可跑的调度系统,受上下文/渲染稳定性限制,复杂到几百个对象、多仓并发时容易卡顿或崩;真系统要拆模块、增量喂。
  • Opus 5.5 的速度/降价/基准数字是媒体口播(快 37%、降 42%、追平 Fable 5.1、$4/$20 每 M token),我没独立复算,引用时保留「来源口径」字样,别当审计值写进对外材料。

六、我的判断:三条落地动作

对想把物流「看板化 + 3D 化」的团队,brief 给的三条未来动作我按优先级重新排了(从能最快见效到最重投入):

  1. 先单仓试点,别一上来就四仓(brief 的「从小范围试点单仓可视化入手」)。选一个高频瓶颈仓,先把「站点→托盘→车→订单」四层对象拉进一张 3D/2D 沙盘,跑通「点订单反查全链路」再谈多仓。单仓数据干净、验证快,失败成本最低。
  2. 把实时地图与业务指标叠在同一层(brief 的「自动高亮异常」)。别做两个 tab——在地图/沙盘上直接叠 KPI,异常(某仓在库骤降、某车 ETA 超阈值)就让那个 3D 对象自己变色/脉冲,而不是另开报警页。这正是「策略游戏感」的核心:状态长在地图上,不在报表里。
  3. 盘点高频瓶颈,再定多仓协同(brief 的「盘点高频瓶颈」)。Riverside/Southfield/Eastport/Westgate 这种四仓协同是最后一步——先把单仓跑稳,再上「跨仓调拨 + 干线 + 配送 ETA」这层网络。跨仓调拨逻辑最复杂、最易出错,放最后做。

适合谁:有车队/库存/订单数据、想让调度台「能转着看 + 点着查」的物流运营、供应链、仓储数字化团队。不适合:还停留在「能不能出图」的 PPT 阶段(那 2D 就够),或要直接扛高并发生产(先拿沙盘当原型,再拆模块接真数据)。纯代码沙盘的价值在于把「物流调度」从报表翻成一张能实时呼吸的空间图——这一步做对了,后面的多仓协同才有落脚点。