夜雨聆风试用版链接：
https://www.plmvision.top/tools/laundry-layout-tool.html
用浏览器打开一个网页，就能在3D空间里拖拽摆放整条洗衣龙生产线——这不是概念演示，而是一个真正能用于方案汇报的工具。
📦 本文导读
一个纯前端单文件HTML工具，基于Three.js实现工业洗衣房3D布局规划，支持6种核心设备拖拽放置、房间尺寸自定义、布局导入导出和移动端操作。
01 为什么需要3D布局工具？
工业洗衣房的设备布局规划，传统方式依赖CAD平面图或手工草图。工程师在二维图纸上画方块、标尺寸，客户看到的也是一堆线条和数字。
问题很明显：
- 📐 平面图缺乏空间感——设备高度、层叠关系全靠想象
- 🔄 方案调整成本高——改一版布局要重新画图
- 📱 汇报场景受限——CAD文件打不开，截图又不直观
- 👥 沟通效率低——客户看不懂工程图，销售讲不清空间关系
这个洗衣房布局工具就是为了解决这些问题而生的。
02 工具概览：一个文件，打开即用
整个工具是一个单文件HTML，不需要安装、不需要服务器、不需要数据库。双击打开浏览器就能用，手机上也能操作。
🏭 洗衣房布局工具 v2
Three.js 3D渲染 · 拖拽式设备放置 · 移动端适配
核心交互逻辑很简单：
- 设置房间尺寸（宽×深，5~100米）
- 从左侧设备列表拖拽设备到3D空间
- 点击设备调整位置、旋转角度
- 导出布局JSON / 截图PNG / 分享给客户
03 六大核心设备，精细建模
工具内置了6种工业洗衣房核心设备，每种都有专属的3D精细模型——不是简单的方块占位，而是根据真实设备外观建模的：
📥 上料皮带
倾斜绿色皮带 + 白色支撑腿 + 端部滚筒 + 两侧挡板。皮带倾斜约30度，支腿位置按1/6比例分布，模拟真实上料场景。
🫧 洗衣笼 PTV16-60
三段式结构：上部25%紫色箱体 + 中部65%白色箱体（带15条竖直分割线，正反双面）+ 下部10%蓝色支腿。分割线精确模拟洗衣笼的分仓结构。
⚙️ 压榨机 PP10-60
下部80%不锈钢色长方体框架 + 上部20%正中白色圆柱油缸。圆柱半径按设备最小尺寸的30%计算，模拟液压压榨结构。
🚂 穿梭车
黄色轨道（沿Z轴20米）含20根横条 + 5米立柱 + 双层绿色皮带（沿X轴垂直于轨道）。轨道、立柱、皮带三层结构完整呈现。
🔥 烘干机 PD60
三段式结构：上部30%黑色箱体 + 中部40%蓝色箱体（正面带圆形玻璃窗，含蓝色门环+不锈钢内圈+半透明玻璃）+ 下部30%白色方形支腿。
📤 卸料皮带
银色铝合金框架（4根主腿+2根中间腿+多层横梁）+ 绿色水平皮带 + 端部滚筒 + 两侧挡板。水平设计，与上料皮带的倾斜形成对比。
04 技术亮点：Three.js硬核实现
从技术角度看，这个工具虽然是一个单文件，但用到了不少Three.js高级特性：
🎨 渲染质量
WebGL抗锯齿 · PCFSoftShadowMap软阴影 · ACESFilmic色调映射 · 像素比限制(max 2)防止移动端卡顿
💡 光照系统
环境光(0.6) + 方向光(1.2, 2048×2048阴影贴图) + 半球光 + 侧面补光(0.4)，四光源系统营造立体感
🎯 交互核心
Raycaster射线检测实现点击选中和地板投射 · OrbitControls带阻尼相机控制 · Ghost Mesh半透明预览拖拽
📐 边界约束
设备移动时自动限制在房间范围内（Math.max/min边界计算）· 编辑/查看模式切换防误操作
值得一提的是材质系统。每种设备都使用了MeshStandardMaterial，通过roughness（粗糙度）和metalness（金属度）的搭配来模拟不同材质：
- 不锈钢：roughness 0.2 / metalness 0.85
- 蓝色烤漆：roughness 0.35 / metalness 0.5
- 白色外壳：roughness 0.4 / metalness 0.2
- 橡胶皮带：roughness 0.6 / metalness 0.1
- 透明玻璃：opacity 0.35 / transparent true
05 实用功能：从规划到汇报全链路
除了3D可视化，工具还内置了一系列实用功能，覆盖从方案规划到客户汇报的完整流程：
房间尺寸自定义
宽度和深度均可调（5~100米，步进0.5米），适应不同规模洗衣房
设备尺寸编辑
每种设备的宽×深×高都可自定义，支持添加全新设备类型
旋转控制
一键旋转90°或自定义任意角度（0~345°，步进15°），键盘R键快捷旋转
导入/导出
JSON格式完整保存布局数据（房间尺寸+设备定义+放置位置），支持团队协作和方案迭代
截图导出
一键导出当前3D视图为PNG图片，直接用于方案汇报PPT
移动端适配
汉堡菜单+触摸拖拽+响应式布局，手机平板都能操作，现场给客户演示
06 默认预设：开箱即用
工具内置了一套完整的洗衣房默认布局预设，打开就能看到效果：
预设布局参数：
- 房间尺寸：20米 × 40米
- 洗衣笼 × 1（旋转90°）
- 烘干机 × 5（旋转90°，沿一侧排列）
- 卸料皮带 × 2（旋转90°）
- 压榨机 × 1（旋转90°）
- 上料皮带 × 1（旋转270°）
- 穿梭车 × 1（旋转180°）
- 共计 11台设备，模拟完整生产线
07 应用场景
📋 方案规划阶段
工程师在投标前快速搭建设备布局方案，评估空间利用率和设备间距是否合理
💼 客户汇报场景
销售用手机/平板打开工具，实时调整布局给客户看，比CAD截图直观10倍
🔧 现场安装指导
施工团队对照3D布局确认设备摆放位置，减少沟通误差
📊 方案迭代
导出JSON保存方案版本，快速对比不同布局方案的空间利用率
08 总结与展望
这个洗衣房布局工具证明了：工业级工具不一定需要复杂的软件架构。一个单文件HTML，借助Three.js的强大3D能力，就能实现过去需要专业CAD软件才能完成的工作。
它的价值在于三个「降低」：
- 📉 降低使用门槛——不需要学CAD，浏览器打开就能用
- 📉 降低沟通成本——3D可视化让非专业人员也能看懂布局
- 📉 降低方案迭代成本——拖拽即调整，导出即保存
未来可以进一步扩展的方向：
- 🔗 接入设备参数库，自动校验设备间距和通道宽度
- 📊 计算空间利用率和产能预估
- 🌐 支持多人协同编辑，实时同步布局变更
- 🎬 添加设备运行动画，展示物料流转路径
🚀 技术栈一览
Three.js v0.169.0 · WebGL · OrbitControls · Raycaster
MeshStandardMaterial · PCFSoftShadowMap · ACESFilmicToneMapping
ES Modules + ImportMap · 纯前端 · 零依赖部署
— END —
觉得有用？点个「在看」分享给同行 👇