在物流供应链领域，"装箱率"是直接影响成本的核心指标。传统的装箱依赖经验丰富的老工人，但经验难以传承且不够稳定。本文复盘了一个基于 Web 3D 技术的智能装箱系统的设计与实现过程，分享如何通过可视化和算法解决这一B端痛点。

一、 为什么要做装箱可视化？

在物流结算中心或仓储管理系统（WMS）中，我们经常面临这样的场景：

1. 空间浪费：由于货物尺寸不一，装箱时容易出现大缝隙，导致集装箱空间利用率低。
2. 成本不可控：因为预估不准，可能多订了集装箱，或者订了不合适的柜型（如普柜无法装下超高货物）。
3. 沟通成本高：现场装箱人员看不懂二维的装箱单，经常装错了才发现装不下，需要重新倒柜。

针对这些痛点，我们设计了一款 “智能装箱优化与可视化系统”。核心目标是：算得准、看得清、省得下。

二、 真实业务场景：从“凭感觉”到“靠数据”

为了更好地理解系统的价值，让我们看两个真实的业务痛点：

场景 A：外贸家具出口的“爆仓”危机

某外贸家具企业每批次出口的货物规格极为复杂，一批订单可能包含床架（长条形）、床头柜（正方体）、床垫（扁平且不可折叠）等20多种规格的纸箱。

• 过去：订舱员拿着计算器加加减减，预估需要2个 40HQ（高柜）。结果装车当天，最后剩下3个立方的货物死活塞不进去。只能临时加订一个 20GP（小柜），不仅运费多出几千美元，还因为临时订舱导致船期延误。
• 现在：通过系统模拟，算法自动尝试了上万种组合，发现只要将其中几件床架“竖着放”并填补在床头柜上方的空隙，就能完美塞进2个 40HQ。一次计算，直接省下一个集装箱的运费。

场景 B：大型设备海运的“特种柜”难题

一家工程机械公司需要运输一批超大型设备部件。

• 过去：业务员如果不熟悉柜型，可能直接订了普通集装箱，结果货物高度超标，卡在柜门口进不去，造成严重的退关损失。
• 现在：系统在导入货物数据时，算法（GreedyAlgorithm）会自动识别出“超高货物”，并自动匹配开顶柜（Open Top Container）或框架箱（Flat Rack）。3D 视图中清晰地展示了货物超出集装箱顶部的部分，帮助业务员直观判断是否符合航运公司的限高要求。

三、 产品核心功能设计

1. 智能算法引擎（The Brain）

产品背后的核心是装箱算法。我们在设计中采用了**贪心算法（Greedy Algorithm）**作为基础策略，并结合了启发式规则。

从代码实现逻辑（GreedyAlgorithm.ts）来看，我们采取了以下策略：

• 容器筛选：系统内置了 20GP, 40GP, 40HQ 等标准柜型，以及开顶柜（Frame Container）等特种柜。
• 货物分流：根据货物高度自动分流。标准货物优先匹配标准箱，超高货物自动匹配框架箱。
• 多维评分：算法不仅仅看体积利用率，还引入了 costEfficiency（成本效率）和 loadingEfficiency（装载效率）的多维评分体系。

2. 交互式3D可视化（The Eye）

B端产品最忌讳”黑盒”。即便算法算出了结果，用户如果看不到具体怎么摆，信任度就会大打折扣。

因此，我们利用 Three.js 和 React Three Fiber 打造了全视角的 3D 交互场景（Scene3D.tsx）：

• 所见即所得：真实还原集装箱尺寸和货物摆放位置。
• 多箱展示：支持一次计算多个集装箱的方案，并在 3D 空间中自动排列展示。
• 交互细节：支持旋转、缩放、透视，甚至可以点击查看单个货物的详细信息。还加入了“混凝土地面”、“安全警示线”等环境元素，提升临场感。

3. 决策辅助报告（The Report）

计算完成后，产品经理需要关注的是”结果交付”。我们设计了详细的 PackingSolutionReport：

• 关键指标：直接展示空间利用率（Utilization Rate）、预估总成本。
• 可视化图表：通过图表展示不同柜型的对比。
• 打印支持：生成的方案可以直接导出打印，作为现场装箱工人的指导手册。

四、 技术架构选型与实现

作为一款现代化的 SaaS 工具，我们在技术选型上追求性能与体验的平衡：

• 前端框架：React 18 + TypeScript。利用 TS 的强类型系统（如 PackingConfig, Cargo, ContainerType 等类型定义）保证业务逻辑的严谨性。
• 3D 引擎：@react-three/fiber。它允许我们用声明式组件的方式编写 3D 场景（如 <Container3D />），极大地降低了 3D 开发的复杂度，让前端开发像写 HTML 一样写 3D。
• 状态管理：使用了 React Hooks (usePackingCalculation, useCargoManagement) 进行逻辑复用，将算法计算、货物管理与 UI 展示解耦。

五、 核心难点与解决方案

难点1：如何处理特种货物？

场景：有些货物超高，普通集装箱装不下。

方案：我们在 ContainerType 中增加了 isFrameContainer 标记。算法在预处理阶段（separateCargosByHeight）会将货物分为”标准货物”和”超高货物”，分别匹配不同的柜型策略，确保”特货特装”。

难点2：如何让计算过程不卡顿？

场景：当货物数量成百上千时，3D 渲染和算法计算可能导致页面卡死。

方案：

1. 按需渲染：在 Scene3D 中，我们引入了可见性控制（visibleContainers），用户可以选择只查看特定的集装箱，减少 GPU 渲染压力。
2. 算法缓存：通过 PackingSolutionCache 对计算结果进行缓存，避免重复计算带来的性能损耗。

六、 产品价值总结

通过这套系统，我们实现了从”经验装箱”到”数字化装箱”的转变：

1. 降本：通过算法优化，平均提升集装箱空间利用率 10%-15%，直接节省运费。
2. 提效：3D 可视化指导，减少了现场沟通成本和装错率。
3. 决策：多方案对比评分，帮助业务人员快速选择最优（成本最低或装载最快）的订柜方案。