不用专业 WMS 系统，CSV 文件就能在浏览器里看 3D 仓库

MyWarehouseVisualizer 是一个纯浏览器运行的仓库可视化工具，核心思路是：把仓库布局和库存数据写进 CSV 文件，上传后就能在网页里看到对应的 3D 仓库空间，并在模型上叠加数据状态（比如哪个货位有损坏、当前库存情况）。

不需要专业的 WMS（仓库管理系统），也不需要部署后端服务。整套逻辑跑在浏览器里，Three.js 负责 3D 渲染，D3.js 负责数据映射，glTF 格式存储仓库模型，w2ui 提供界面组件。

它不能做的事也值得说清楚：这不是一个仓库管理系统，没有出入库操作、库存实时同步或多用户协作。它的定位更接近"静态数据驱动的 3D 展示工具"——你有一批仓库数据，想直观看清楚空间分布，这个工具适合做这件事。

工作原理

整个流程分两层：

数据层：布局信息和库存数据分别写在 CSV 文件里。布局 CSV 定义仓库里有哪些货架、货位，以及它们在空间中的位置；库存 CSV 则记录每个货位当前的数据状态。两份文件上传后，工具会把它们关联起来，将数据状态映射到对应的 3D 位置上。

渲染层：仓库的 3D 模型以 glTF 格式存储（glTF 是 Khronos Group 制定的开放 3D 模型标准，Three.js 原生支持），模型本身用 Blender 制作并导出。Three.js 加载模型后，D3.js 负责把 CSV 数据"染色"到对应的货位节点上，最终形成一个可以旋转、缩放、点击查看的 3D 仓库视图。

这个架构的优势是轻量——不依赖后端，所有计算在客户端完成；局限也在这里，数据更新需要重新上传 CSV，没有实时推送能力。

内置功能

三种预设仓库模板：项目内置了小型、中型、大型三套仓库数据，可以直接加载，不需要先准备自己的数据，适合快速了解工具效果。

自定义数据上传：支持上传本地 CSV 文件（布局 + 库存），也支持通过 CSV URL 的方式指定远程数据源，后者方便定期刷新数据。

WarehouseBuilder Excel 工具：仓库里提供了一个 .xlsm 格式的 Excel 宏文件，可以辅助生成符合格式要求的 CSV 数据，降低手写数据的难度。

数据状态可视化：货位可以根据数据值显示不同颜色，演示中包含了损坏分析场景，通过颜色区分正常货位和异常货位。

3D 交互导航：基于 Three.js 的 OrbitControls，支持鼠标拖拽旋转、滚轮缩放，可以从不同角度观察仓库空间。

安装与使用

项目没有 npm 依赖，不需要构建步骤，直接下载运行即可。

前提条件：需要一个本地 Web 服务器来运行（直接双击 index.html 可能因浏览器跨域限制无法加载资源）。常见选择是 VS Code 的 Live Server 插件、Python 自带的 http.server，或者任何静态文件服务器都可以。

启动步骤：

使用自定义数据的流程：

项目 data/ 目录下有现成的示例 CSV 文件，可以参照格式准备自己的数据。data/WarehouseBuilder.xlsm 提供了辅助生成工具，用 Excel 填写货位信息后可以导出对应 CSV。

准备好布局文件和库存文件后，在首页选择"Upload..."，同时上传这两份 CSV，工具会自动解析并渲染。如果数据格式不符合要求，页面通常不会渲染出内容，建议先用内置示例数据确认环境可用，再切换自定义数据。

写在最后

MyWarehouseVisualizer 是一个有明确应用场景的工具型项目：如果你需要把仓库布局做成可视化报告、向非技术人员展示库存分布，或者快速搭建一个可交互的仓库示意图，它的轻量和免配置特性会有帮助。

56 个 Star 和 23 个 Fork 说明它在小范围内有一定受众，但整体文档和社区活跃度有限，遇到问题时可以参考项目作者提到的文档仓库，或者直接查看 data/ 目录下的示例数据来理解格式规范。

对于需要实时数据、多用户操作或系统集成的场景，它并不适合——那是 WMS 系统要解决的问题，不在这个项目的范围内。

GitHub 项目地址：https://github.com/MarioDelgadoSr/MyWarehouseVisualizer (opens in a new tab)