技能介绍

门窗设计的重复劳动困局

传统门窗设计依赖 AutoCAD 或 SolidWorks 等专业工具，设计师需手动绘制型材、分格、标注尺寸，每调整一次分格就要重画全套图纸。客户确认环节常因「看不懂平面图」反复沟通，现场测量数据与设计方案难以联动，材料用量统计更是耗时易错。

从拖拽到三维的完整工作流

千域门窗设计师通过纯前端技术栈解决这些问题。核心模块包括：

拖拽式绘图：在 Canvas 上直接拖拽生成门窗外框，默认采用「空框线框」模式，仅显示外轮廓，玻璃、五金等细节按需加载
交互式分格系统：横竖龙骨作为独立对象管理，支持拖拽定位、列表排序，每种窗型（推拉/平开/折叠/悬窗）自动绘制专属结构线（如推拉轨道、平开合页）
Three.js 实时三维预览：点击 3D 按钮即生成带五金细节的立体模型，支持轨道控制（旋转/缩放/触摸操作）、自动旋转、线框模式切换，型材颜色映射覆盖白/灰/棕/黑/香槟/木纹六种主流色系

订单管理模块提供草稿→报价→确认→生产→完成五阶段状态机，配合销售统计面板；阳光房设计模块支持四坡/平顶/单坡/八角顶四种屋顶参数化生成，自动计算面积与成本；量房模块可上传户型图，绘制测量线、矩形区域、文字标注，并实时汇总尺寸数据。

技术边界与部署注意

应用采用纯前端架构（HTML5 Canvas + 原生 JS + Three.js r128），所有数据存储于 LocalStorage，无需后端服务。部署时需将 assets/door-window-designer/ 目录托管至任意静态服务器，Three.js 通过 CDN 加载。移动端适配 PWA 响应式设计，但复杂分格操作在小屏幕上精度受限。知识库模块内置 44 篇行业文章，覆盖型材、玻璃、五金、安装等十大类，支持关键词实时搜索与收藏，适合作为设计规范速查工具。

注意：3D 渲染依赖浏览器 WebGL 支持，老旧设备可能出现性能问题；型材库默认配置需根据实际供应商参数调整，材料计算模块的 35% 利润率建议值需结合市场情况修改。