Smart Warehouse

智慧仓储数字孪生平台 (smart-warehouse)

简体中文 | English

🔗 在线体验地址：https://smart-warehouse-wine.vercel.app

基于 Vue 3 + Vite + TypeScript + Three.js 构建的 3D 智慧仓储与物流数字孪生管控平台。直观还原现代化智能物流园区的运转实况，包括自动化 AGV 物料循环搬运、立体仓库出入库、冷链气密仓恒温监控以及月台货车装卸流程，支持科技夜景与明亮白昼双风格切换。

🎬 项目介绍视频 (Intro Video)

https://github.com/user-attachments/assets/c100f24e-c684-498b-a913-01fa0e48ea68

30 秒 · 1920×1080 · 16:9 · 30fps｜数字孪生全景 → AGV 闭环 → 货车 PBR → 全息遥测 → 双主题切换 → 技术栈 → 收尾。

📸 效果展示 (Showcase)

🌙 赛博夜景模式	☀️ 白昼展厅模式

🚚 货车高透车窗与驾驶室内饰	🚛 清漆车身与防眩车灯细节

📺 仓内自发光全息数据大屏	🛰️ 设备点击吸附卡片

🌟 核心功能 (Features)

• 🌓 双视觉主题无损切换：

  • 赛博深空模式：通透深晶蓝地坪搭配青蓝激光导引线与荧光指示，营造浓厚的未来工业科技感；
  • 白昼展厅模式：明亮素雅的浅灰沙盘展台质感，清晰呈现设备机械轮廓与建筑空间结构；
  • 顶部导航栏支持一键无感切换，灯光色温与地坪材质自动平滑适配。

• 🤖 自动化 AGV 闭环物料搬运：

  • 多台 AGV 循迹小车沿地面导向线有序运转，模拟流水线取货、重载运输、立库卸货与空车回流的完整搬运闭环；
  • 箱件在转运过程中保持颜色与属性的一致性，各车自适应过弯与防碰。

• 🚚 工业货车与座舱细节透视：

  • 货车挡风玻璃与车窗采用透明物理玻璃质感，可透过车窗清晰看清内部方向盘、中控液晶屏与座椅等座舱内饰；
  • 大灯、雾灯与车顶示宽小灯均经过防频闪优化，在远近各种视角及车辆行驶中始终稳定明亮；
  • 外部公路采用自然真实的工业深灰沥青色，与库区地坪层次分明。

• 📊 仓内全息遥测大屏：

  • 仓库内醒目位置竖立自发光全息大屏，动态呈现 AGV 运行轨迹波形、恒温冷库指标（-18.2℃）、月台泊位状态及实时吞吐率。

• 🖥️ 业务监控面板 (HUD)：

  • 顶栏：集成动态时钟、天气温湿度监控与全屏切换；
  • 左侧态势栏：展示今日仓储吞吐、AGV 运行调度与高位货架利用率；
  • 右侧控制栏：实时监控 3 大装卸月台泊位与冷库状态，提供 3D 视角控制坞（放大、缩小、复位、顶视、暂停/继续动画）。

• 🔍 智能交互与平滑运镜：

  • 点击场景中的任意设备（货车、AGV、传送带、机械臂、托盘垛等），摄像机镜头会自动平滑由远及近推送到目标上方；
  • 伴随吸附式信息弹窗展示该设备的实时运行参数，点击场景任意空白处可平滑退出并继续自由漫游。

🛠️ 技术栈 (Tech Stack)

• 核心框架：Vue 3 (Composition API, <script setup>)
• 构建工具：Vite 5
• 开发语言：TypeScript 5
• 三维引擎：Three.js (WebGLRenderer, PerspectiveCamera, OrbitControls)
• 三维建模：Blender 5.2.2 LTS (PBR 材质、GLTF 2.0 规范导出)

📁 项目结构 (Project Structure)

smart-warehouse/
├── docs/                          # 设计说明与高清效果图集
├── public/
│   ├── smart_warehouse.glb        # 3D 核心仓储数字孪生模型文件
│   └── models/
├── src/
│   ├── components/                # 工业大屏各业务 HUD 组件与弹窗
│   ├── core/
│   │   ├── WarehouseScene.ts      # Three.js 核心场景管理器与渲染驱动
│   │   └── constants.ts           # 场景业务指标与设备数据字典
│   ├── types/                     # TypeScript 类型定义
│   ├── App.vue                    # 主界面与 3D 画布容器
│   └── main.ts                    # 入口文件
├── index.html                     # 页面 HTML
├── package.json                   # 项目依赖配置
├── README.md                      # 中文项目说明文档
└── README_EN.md                   # 英文项目说明文档 (English Documentation)

🚀 本地运行 (Quick Start)

# 1. 克隆代码仓库
git clone https://github.com/Xxcool/smart-warehouse.git
cd smart-warehouse

# 2. 安装项目依赖
npm install # 或 pnpm install

# 3. 启动本地开发服务 (默认端口 8088)
npm run dev

# 4. 构建生产产物
npm run build

⌨️ 常用快捷键 (Shortcuts)

👨‍💻 作者 (Author)

• Xxcool - GitHub (@Xxcool) · 掘金技术主页

📄 开源许可 (License)

本项目遵循 MIT License 开源协议。