【常州工NEC】FiberSteel Studio国标方管小软件开源

DarrenPig · 2025 年12 月 30 日 10:44

FiberSteel Studio

一个面向型材布置与工艺设计的 3D 交互工作台，支持阵列布置、轴向对齐、精准旋转、对象捕捉、组合视图与触控板优化等特性。

前端：React 18、TypeScript、Ant Design、TailwindCSS
三维：Three.js（OrbitControls、TransformControls、Box3/Vector3、STLExporter 等）
路由：react-router-dom 7
状态：zustand
构建：Vite 6（@vitejs/plugin-react、vite-tsconfig-paths）
后端：Express（ESM，nodemon + tsx 本地开发），支持 Vercel Serverless

基本操作：
- 旋转视角：左键拖动背景
- 平移视角：右键拖动背景
- 缩放：滚轮滚动
对象交互：
- 选择：单击选中物体，左上角显示选中物体的坐标信息。
- 右键菜单/双击：双击物体或右键单击可呼出快捷菜单（剪切、复制、粘贴、删除、锁定等）。
- 快捷键：
  - T：切换移动模式 (Translate)
  - R：切换旋转模式 (Rotate)
  - P：打开属性面板 (Properties)
  - L：锁定/解锁当前物体 (Lock)
  - Del：删除选中物体
  - Ctrl+C/V：复制/粘贴
多选模式：按住 Shift 或 Ctrl 点击可多选，支持批量移动。

绘图工具：左侧工具栏选择矩形、圆形、直线等进行绘制。
阵列孔生成：
1. 选中一个矩形。
2. 在右侧“阵列孔参数”面板设置间距和孔径标准 (M3/M4)。
3. 点击“在选中矩形内生成阵列”，系统将自动计算行列数并填充圆孔。

选择与轴旋转
- 空格按当前轴旋转 +90°
- Shift+Space 循环切轴（Y → X → Z → Y）
- 面板 AxisSelector（RGB）直观切换轴
拖动与轴锁定
- 拖动参考坐标轴固定在起点，便于相对位移感知
- 按住 Shift 时沿对象重心轴（本地 Z）滑动，自动收回到轴线
- 点击坐标轴进入“沿该轴拖动”模式，视图不再旋转/平移
旋转增强
- 自由角度：TransformControls 旋转手柄
- 吸附旋转：开关与步长（°），支持 15/30/45/90 等
- 精确输入：RX/RY/RZ (°) 面板数值输入，实时写回实例
Rhino 风格工具
- CPlane：World XY / YZ / ZX / Object 构造移动平面
- Ortho：未锁轴时自动正交（沿距基点更近轴移动）
- Osnap：End / Mid 端点与中点吸附
HUD 坐标轴
- 右上角固定渲染（含 X/Y/Z 文字符号与高对比背景），随视角同步
组合视图
- 四视口：Top / Front / Right / Perspective，一键切换
- 右下透视视图独立渲染 HUD 坐标轴
格点吸附
- 按 snapSize（mm）量化世界坐标到最近格点；支持 Shift 投影后再吸附
触控板模式
- 阻尼、速度、手势与 zoomToCursor 优化；双指缩放+平移更自然

如需按你的工作流进一步调整默认行为（步长、吸附阈值、视图布局等），欢迎提出，我会快速迭代优化。

store/modeling.ts：几何参数、实例偏移/旋转、锁定、孔位、撤销/重做
store/interaction.ts：交互态（轴锁定、交互基点、吸附步长、求解点）
store/insert.ts：插入态（插入模式、插入基点、吸附步长、锁点、已插入列表）
页面使用示例：在 Designer.tsx 分别从 useInteractionStore 与 useInsertStore 读取与更新对应状态，提升边界清晰度