refactor(viewer): 单文件查看器拆成 webapp/ 多文件，走本地 http；Worker 换成真文件
前端不再是"一个 16MB HTML + 一个 2955 行模板"。现在： webapp/index.html 343 行 DOM 骨架，零内联数据 webapp/styles/*.css 811 行 CSS 按段切成 8 个文件 webapp/js/app.js 原内联主脚本逐字搬出（仍是普通脚本，S5 才改 ESM） webapp/js/ik-solver.js / ik-glue.js / vendor/three.min.js（原 web/ 三个文件） webapp/workers/ik.worker.js 真 Worker 文件 webapp/generated/00_data.js 生成物（网格/工程图/行程/碰撞/螺钉） dist/机器人手臂3D查看器.html 分发用单文件，由 build_viewer 内联上面这些文件产出 入口：python -m arm.viewer.serve 后开 http://127.0.0.1:8123/ （serve 带 no-store，改完刷新即新构建，不再需要 Ctrl+F5；显式 MIME， .js 被 Windows 注册表判成 text/plain 会让模块静默不执行） 删掉 src/viewer_tpl.html 与 web/ 目录（旧产物移入 backups/pre_split_20261015/）。 工程图不再维护第二份 sheets.jsdata —— 直接读 draw_sheet 写出的 4 个真 SVG。 实测中修掉的问题： - serve 的 / 原先"内部映射"到 webapp/index.html，导致文档基址是 /、相对路径的 8 个 CSS 与 4 个 JS 全部 404（整页无样式无脚本）。改成 302 跳转。 - file:// 下 new Worker('workers/…') 构造阶段不抛错、错误以异步 onerror 到达， 所以"构造失败才试 Blob 兜底"永远不会触发；改为按协议选路。两条路径都已实测 backend=worker（http 走文件、file:// 走 Blob）。 - Worker 握手 3s 在 headless 并发下会误判"没起来"（截图里红徽标即此），放宽到 10s， 并把后端状态暴露成 window.__IK_BACKEND / __IK_BACKEND_LOG 供测试直读。 - 截图竞态：4 并发 × 每页 14MB 数据时，虚拟时间预算会在页面加载完成前到期， 拍到半初始化画面（且能"稳定地坏"，旧基线里 m9_motion 就是这么混进来的）。 并发降到 2、预算 40s、serve 加 HTTP/1.1+大缓冲+字节缓存，并用"同一构建两轮" 重新界定稳定性：99 张逐字节一致、6 张属噪声改走像素容差（mean<=0.02、单像素<=32）。 - 关卡自身两处假通过已修：node 输出被 GBK 解码炸掉时不再算 PASS； 线束干涉测试读不到通道源码时会 exit 2，而不是"零通道=零穿透=通过"。 关卡结果：python -m arm.build_model 退出码 0；10 项数据哈希与基线一致； IK exact 段逐字节一致；99 张截图逐字节一致 + 6 张在噪声阈内；线束干涉测试 1800 点 0 穿透。
This commit is contained in:
@@ -0,0 +1,357 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>六电机人形机器人手臂 · 装配与打印模型</title>
|
||||
<link rel="stylesheet" href="styles/base.css">
|
||||
<link rel="stylesheet" href="styles/sheet-chrome.css">
|
||||
<link rel="stylesheet" href="styles/sheet-theme.css">
|
||||
<link rel="stylesheet" href="styles/sheet-hud.css">
|
||||
<link rel="stylesheet" href="styles/guide.css">
|
||||
<link rel="stylesheet" href="styles/dock.css">
|
||||
<link rel="stylesheet" href="styles/ikbar.css">
|
||||
<link rel="stylesheet" href="styles/viewmode.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<header>
|
||||
<b id="ttl">人形机器人手臂</b>
|
||||
<span class="q" id="ver"></span>
|
||||
<button class="tab on" data-view="model">三维模型</button>
|
||||
<button class="tab" data-view="sheet">装配图</button><button class="tab" data-view="motion">运动模拟</button>
|
||||
<span class="sp"></span>
|
||||
<button id="bAsm" class="on">装配视图</button>
|
||||
<button id="bExp">爆炸视图</button>
|
||||
<input id="exp" type="range" min="0" max="100" value="0" style="width:96px">
|
||||
<select id="cam">
|
||||
<option value="iso">等测</option><option value="front">前视</option>
|
||||
<option value="side">侧视</option><option value="top">顶视</option>
|
||||
<option value="wrist">腕部特写</option><option value="joint">关节特写</option><option value="elbow">肘部特写</option><option value="hand">手部特写</option>
|
||||
</select>
|
||||
<button id="bWire">线框</button>
|
||||
<button id="bXRay">电机半透</button>
|
||||
<button id="bScr" class="on" title="显示/隐藏全部螺钉（S01~S10）；点右侧 BOM 螺丝行可在模型中高亮定位">螺钉</button>
|
||||
<button id="bHarn" class="on" title="显示/隐藏线束走线指示（主干4芯总线、电机出线分支、过关节U型/螺旋缓冲环、T接小板）">线束</button>
|
||||
<button id="bEnv" title="显示/隐藏可达外包络（运动学边界）">可达包络</button>
|
||||
<button id="bFit">复位</button>
|
||||
<button id="bL" title="显示/隐藏左栏">左栏</button>
|
||||
</header>
|
||||
|
||||
<div id="ikbar">
|
||||
<div class="ikrow">
|
||||
<span class="ik-t">IK</span>
|
||||
<span class="lb">目标点 X</span><input type="number" id="ikX" step="1" title="CAD 世界坐标 X / mm">
|
||||
<span class="lb">Y</span><input type="number" id="ikY" step="1" title="CAD 世界坐标 Y / mm">
|
||||
<span class="lb">Z</span><input type="number" id="ikZ" step="1" title="CAD 世界坐标 Z / mm（桌面 z=0，向上为正）">
|
||||
<span class="vsep"></span>
|
||||
<span class="lb">工具长</span><input type="number" id="ikTool" value="0" step="5" title="在工具法兰面之外、沿 J6 轴线再伸出的工具长度 / mm">
|
||||
<span class="lb">mm</span>
|
||||
<span class="vsep"></span>
|
||||
<span class="lb">扫描精度</span>
|
||||
<select id="ikStep" title="冗余维 (J4,J5) 的粗扫步长：只在可行段内采样；位置任务取全局最优，姿态任务的精确解由孤立根枚举给出、与步长无关">
|
||||
<option value="1">快速 1°</option>
|
||||
<option value="0.5">较快 0.5°</option>
|
||||
<option value="0.25" selected>标准 0.25°</option>
|
||||
<option value="0.1">精细 0.1°</option>
|
||||
<option value="0.05">参考级 0.05°</option>
|
||||
</select>
|
||||
<button id="ikSolve" title="求解并把手臂动画移动到该位姿（取相对当前姿态行程最小的构型）">求解并移动</button>
|
||||
<button id="ikPose" title="开启姿态控制：除 TCP 位置外，同时指定末端工具姿态（工具轴指向 + 绕轴滚转）">姿态控制</button>
|
||||
<span id="ikPoseBox">
|
||||
<span class="lb">方位</span><input type="number" id="ikAz" step="5" value="0" title="工具轴（法兰朝外方向）绕 CAD Z 轴的方位角 / 度">
|
||||
<span class="lb">仰角</span><input type="number" id="ikEl" step="5" value="90" title="工具轴（法兰朝外方向）自 CAD +Z 抬起的仰角 / 度：0 = 竖直向上，90 = 水平，180 = 竖直向下">
|
||||
<span class="lb">滚转</span><input type="number" id="ikRoll" step="5" value="0" title="绕工具轴自身的滚转角 / 度（右手系）">
|
||||
<button id="ikPoseCur" title="把当前真实工具姿态读回三个输入框">取当前</button>
|
||||
<button id="ikPoseDown" title="快捷设为工具轴竖直向下（爪取常用姿态）">垂直向下</button>
|
||||
<span class="lb">优先级</span>
|
||||
<select id="ikPrio" title="位置与姿态不能同时满足时的取舍：位置优先 = 保 TCP 点位精确、姿态取最接近可达值；姿态优先 = 保指定姿态精确、TCP 取最接近可达点（位置差在结果栏如实给出）；混合优先 = 用右侧滑杆自由分配两端比重，0% = 姿态优先、100% = 位置优先，中间值在两端锚点之间按归一化折中代价加权搜索">
|
||||
<option value="pos" selected>位置优先</option>
|
||||
<option value="ori">姿态优先</option>
|
||||
<option value="mix">混合优先</option>
|
||||
</select>
|
||||
<span id="ikMixBox" title="混合优先的比重（自由分配位置与姿态）：向左 = 姿态优先、向右 = 位置优先；0% / 100% 与两条纯算法逐位一致。折中代价 J = w·(e/e_ref)² + (1−w)·(o/o_ref)²，两端尺度取各自锚点（位置端 = 位置优先解的姿态残差、姿态端 = 姿态优先解的位置差），故读数即「沿折中历程的进度」。滑动即算即动，松手全量折中">
|
||||
<span class="lb">姿态</span>
|
||||
<input type="range" id="ikMixW" min="0" max="100" step="1" value="50">
|
||||
<span class="lb">位置</span>
|
||||
<span class="st" id="ikMixV">50% 位置</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="ikrow">
|
||||
<button id="ikPick" title="开启后在视图中单击，把目标点投到当前高度的水平面上">视图拾取</button>
|
||||
<button id="ikRt" title="开启后拖动黄球即算即动：手臂实时追踪目标点移动（松手做一次精修求解）">实时追踪</button>
|
||||
<button id="ikHome" title="所有关节角归零">归零位</button>
|
||||
<button id="ikZero" title="载入一个示例目标并求解">示例目标</button>
|
||||
<span class="vsep"></span>
|
||||
<span class="hint" id="ikHint">拖黄球 = 移动目标（Shift 仅上下）；拖箭头 = 调工具轴指向；拖箭杆或粉球 = 滚转；松手自动求解</span>
|
||||
<span class="vsep"></span>
|
||||
<span class="st" id="ikBar">—</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<aside id="left">
|
||||
<div id="ikpanel">
|
||||
<div class="ikh">
|
||||
<h3>逆运动学 · 位置与姿态 · 最小总关节角</h3>
|
||||
<span id="ikBadge" class="badge wait">待求解</span>
|
||||
</div>
|
||||
<table id="ikTab">
|
||||
<thead><tr><th>轴</th><th>关节</th><th>角度</th><th>|θ|</th><th>限位</th></tr></thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
<div class="kv" id="ikSum"></div>
|
||||
<div class="src" id="ikSrc"></div>
|
||||
<div id="ikAltN"></div>
|
||||
<div id="ikAlts"></div>
|
||||
<details id="ikChkBox"><summary>结构与精度自检 / 工作空间</summary><div class="kv" id="ikChk"></div>
|
||||
<div class="kv" id="ikDep"></div></details>
|
||||
<details id="ikDoc">
|
||||
<summary>算法说明与公式推导</summary>
|
||||
<div class="doc">
|
||||
<b>模式</b>：本页「<b>运动模拟</b>」承载全部运动学能力；「三维模型」为纯静态模型视图（关节锁定在设计零位、无目标点与求解控件），「装配图」为二维图纸。运动模拟下左栏只保留 IK 结果与关节角度，零件树/打印清单自动收走。<hr>
|
||||
<b>目标</b>：使 TCP（末端工具法兰 P09 安装面中心，可加“工具长”）到达给定点，并在一切满足限位的可行构型中取
|
||||
<b>各电机需转过的角度之和最小</b>者（相对当前姿态的行程；连续轴 θ 与 θ±360 是同一物理位形，角差一律取 ±180° 内的短弧，见第 6 条；离线批算不给参考姿态时退化为 Σ|θᵢ| 最小）。开启上方“<b>姿态控制</b>”后，
|
||||
约束升级为 <b>位置 3 + 姿态 3</b>（工具轴指向 + 绕轴滚转），见第 5 条。
|
||||
<br><b>姿态操控</b>：姿态开启后目标球处出现方向箭头与粉色侧球——<b>箭头指向即工具朝外方向</b>（法兰面法向朝外，也就是工具伸出的方向）。
|
||||
<b>拖箭头头部</b>用弧球法（指针射线与以目标为球心、半径＝箭长的球求交，方向＝交点−球心）连续调整方位/俯仰；
|
||||
<b>拖箭杆或粉色侧球</b>按指针绕轴的转角增量改滚转；右侧数字框随时同步，可精确微调，
|
||||
「取当前」把真实工具姿态读回、「垂直向下」一键设为爪取常用姿态。
|
||||
<br><b>约定</b>：求解器内部工具坐标系 z 轴取法兰面法向（朝臂内，与 TCP 外伸反向）；界面上的方位/仰角/滚转、
|
||||
箭头与绿色当前轴线均以朝外法向描述，入栈时绕工具 x 轴翻 180° 换算，两者看到的物理姿态完全一致。
|
||||
<ol>
|
||||
<li><b>先消去一维</b>（仅位置任务）：TCP 恰好落在 J6 轴线上，绕 J6 转动不改变 TCP 位置 ⇒ 对“到点”任务取
|
||||
<code>θ6 = 0</code> 即已最优。</li>
|
||||
<li><b>识别结构</b>：J2 / J4 / J5 三轴严格平行（轴向 Y，过 x = 19.5），J1 轴为 X，J3 轴沿臂长方向 Z。
|
||||
记 <code>A = X−X0</code>、<code>R = |(Y−Y0, Z−Z1)|</code>、<code>φ = atan2(Z−Z1, Y−Y0)</code>，
|
||||
则 <code>X = X0 + a</code>，而 <code>(Y, Z)</code> 由 <code>(b, c)</code> 绕 J1 轴旋转 φ 得到：<br>
|
||||
<code>a = Vx·cosθ3·cosθ2 + Vz·sinθ2</code>，<code>b = −Vx·sinθ3</code>，
|
||||
<code>c = C0 + (−Vx·cosθ3·sinθ2 + Vz·cosθ2)</code>，
|
||||
其中 <code>Vx, Vz</code> 只是 (θ4, θ5) 的函数。</li>
|
||||
<li><b>两式联立消元（关键一步）</b>：由 <code>a = A</code> 得恒等式
|
||||
<code>A² + n² = Vx² + Vz²</code>（<code>n = −Vx·cosθ3·sinθ2 + Vz·cosθ2</code>）；
|
||||
代入 <code>b² + c² = R²</code> 后 θ3 的项<u>全部抵消</u>，于是<br>
|
||||
<code>n = (R² + A² − Vx² − Vz² − C0²) / (2·C0)</code> —— <b>唯一确定</b>；<br>
|
||||
再由 <code>n² + A² = Vx²·cos²θ3 + Vz²</code> 得
|
||||
<code>cos²θ3 = (n² + A² − Vz²) / Vx²</code> ⇒ θ3 共四支 <code>±σ, ±(π−σ)</code>；<br>
|
||||
最后 θ2 与 θ1 各由一个 2×2 线性方程组唯一确定：
|
||||
<code>cosθ2 = (κA + Vz·n)/(κ² + Vz²)</code>，<code>sinθ2 = (Vz·A − κ·n)/(κ² + Vz²)</code>，
|
||||
<code>κ = Vx·cosθ3</code>；<code>θ1 = φ − atan2(c, b)</code>。</li>
|
||||
<li><b>遍历冗余（按行裁剪到可行段）</b>：(θ4, θ5) 就是二维冗余。闭式支只在平面支有解时才存在，
|
||||
限位盒内只有 <b>7~27%</b> 的网格点能过判据，且实测（5 个目标 × 全部 θ4 行）<b>每行的可行集都是单一连续段</b>
|
||||
—— 于是先用探测步找出每行的可行段、向两端各放宽一个探测步兜住段界，段内再按步长精扫。
|
||||
段内密度与全域扫一致，因此<b>解的质量不动</b>，粗扫采样量降约 4.6×（但全量总耗时只降约 1.10×——局部加密窗口是 ±2h 步长 h/8，格数恒为 32×32/种子、与 h 无关，精修才是耗时地板）。
|
||||
之所以不把粗扫一起放松：根枚举目前不保证完备，漏根时要靠粗扫的窄带候选兜底，
|
||||
实测把粗扫同步放松会换来上百度级的代价劣化。</li>
|
||||
<li><b>姿态任务（6 自由度）</b>：工具坐标系姿态 <code>R = R₁·R₂·…·R₆</code>（与场景图 6 级矩阵链一致）。
|
||||
结构上 <b>J5 轴与 J6 轴在腕心 (19.5, 128, 222) 垂直相交</b>，因此 θ6 只提供绕工具自身轴的滚转：
|
||||
<u>工具轴指向 = (R₁…R₅)·ẑ，与 θ6 无关，TCP 位置也与 θ6 无关</u>。每条位置闭式支都附带确定的 R₅
|
||||
（= R₁…R₅），滚转角随之闭式解出：<code>N = R₅ᵀ·R_des</code>（需为 Rz(−θ6)）⇒
|
||||
<code>θ6 = −atan2(N₁₀, N₀₀)</code>；姿态偏差 <code>e = ∠(R₅·Rz(−θ6), R_des)</code> ≤ 2° 的支才收入。</li>
|
||||
<li><b>姿态 = 孤立根求解</b>：闭式支把 θ1..θ3 吸收掉之后，姿态任务只剩「工具轴指向 = 目标轴」
|
||||
这 2 个方程、2 个未知数 (θ4,θ5)，解是<b>孤立点</b>（独立密集种子 + 牛顿普查实测只有 1~2 个根），
|
||||
滚转再由 θ6 闭式补上。所以不再用网格密度去撞那条斜窄谷：逐行对残差两个分量找<b>变号括号</b>、
|
||||
从括号中点起跑<b>阻尼高斯-牛顿</b>（奇异时加大阻尼而非退出），并对每支的 ‖e‖ 最小节点补种以收
|
||||
切向相切的根；代价最优的若干条入选候选再各收口一次。于是
|
||||
<b>姿态残差量级从 ~10⁻²° 变为 10⁻⁶°（工程意义上的精确）</b>，且 Σ|θ| 不劣于原路径。</li>
|
||||
<li><b>两处判据陷阱</b>（都验过，写在这里防止被自证）：其一，切向残差在工具轴<b>反平</b>时同样为零，
|
||||
同向判据只能在收口时验，当作迭代中止条件会让每支一进来就作废；其二，求根按<b>支下标</b>对齐
|
||||
prev/cur，不可行的支必须留 null 占位，否则下标错开、括号判据失配，实测会整支漏掉一个真根、
|
||||
多付 130° 关节角。确有少数奇异「刀尖」构型<b>无精确根</b>，此时牛顿收敛到 ‖e‖ 的真实最小，
|
||||
报出的残差不再是采样伪影。</li>
|
||||
<li><b>混合优先（比重可调折中）</b>：优先级下拉的第三种模式——一根滑杆自由分配两端：
|
||||
<b>0% 即姿态优先、100% 即位置优先</b>（两端直接交给上面两条专用算法，结果逐位一致），
|
||||
中间值在两端锚点之间最小化<b>归一化折中代价</b>
|
||||
<code>J = w·(e/e_ref)² + (1−w)·(o/o_ref)²</code>。两端尺度取锚点自身：
|
||||
<code>e_ref</code> = 姿态优先解的 TCP 位置差、<code>o_ref</code> = 位置优先解的姿态残差，
|
||||
于是<b>滑杆读数就是「沿折中历程的进度」</b>、与目标的绝对误差量级无关（50% ≈ 两端各自归一后对半）。
|
||||
之所以不用「1 mm ↔ 1°」的绝对量纲：实测两端误差常在 100 mm / 40° 量级，绝对量纲会把读数整体挤向
|
||||
位置端（折线中点落到 ~13% 处），滑杆就不好用了。两端锚点复用上面两条算法——位置端 = 位置精确族 +
|
||||
闭式滚转 + 孤立根收口（位置不可达时退化为最近可达位置），姿态端 = 工具轴闭式对齐 + θ6 补滚转
|
||||
（姿态精确、位置最近）；中间值以两锚点及<b>关节空间插值</b>为种子，对 6 维残差
|
||||
<code>[√w·(p−t)/e_ref , √(1−w)·RV°/o_ref]</code> 做<b>阻尼高斯-牛顿 + 单轴抛光</b>，取 J 最小者
|
||||
（J 同量级 2% 带内取行程 — 相对当前姿态的 Σ|wrap(θᵢ−refᵢ)| — 更小者，防等价支横跳）。两端中任一端在另一维也达标
|
||||
（≤0.05）时折中无意义、直接返回该端——注意位置端不达标而姿态端在位置上达标时返回<b>姿态端</b>
|
||||
（它两维同时占优：位置优先族收不到的到达解，姿态端收得到）。全程无随机数，同一输入逐位可复现；
|
||||
拖动走快路（同「实时续解」条哲学，归一化尺度沿用最近一次全量的缓存），松手必走全量。</li>
|
||||
<li><b>连续优先（最小移动角 / 防倒摆）</b>：等价多分支（θ3 的 ±σ/±(π−σ)、肘上/肘下、J1/J3 镜像族）之间只按 Σ|θ| 选优时，
|
||||
目标微动就会在分支间跳来跳去、绕远路（实测目标挪 20 mm 就翻族：垂直向下时左右移动单步最大 74.8°、
|
||||
累计绕出 348°，而目标实际只扫过 160°）。交互求解以<b>当前手臂姿态</b>为参考位姿，选解判据取
|
||||
<b>所有电机需要转过的角度之和最小</b>——<code>Σ|wrap180(θᵢ−refᵢ)|</code>：连续轴（J1/J3/J6）无机械限位，
|
||||
θ 与 θ±360 是同一物理位形，故角差一律取短弧；末尾 <code>1e-6·Σ|θ|</code> 只作并列时的次序稳定项。
|
||||
同一条扫描路径实测：单步最大 5.0°、累计 160.0°，与目标实际扫过的角度一致。
|
||||
拖动动画同样对连续轴取「离起始角最近的等价角」再插值，避免 +151.9°→−167.0° 反向扫 318.9° 绕一整圈。</li>
|
||||
<li><b>实时续解（拖动快路）</b>：目标每帧只挪几毫米时，真解在 (θ4,θ5) 平面上连续移动，
|
||||
没必要为重扫整个冗余维付全价。<code>solveWarm</code> 只在上一帧解附近取<b>同一闭式支</b>、走一小步同支搜索，
|
||||
姿态任务再收口一次；<b>任一校验不过（换支、越限、位置残差超差、姿态没收口、关节跳太大）就返回 null
|
||||
自动回落全量粗扫</b>，松手后的求解一定不带 warm、走全量。快路只负责「能快的时候快」，不改变正确性判据。</li>
|
||||
<li><b>代表角</b>：位姿以 360° 为周期，解角一律取 ±180° 内的等价角（|θ| 最小）；J2 / J4 / J5 另受相邻件实测机械区间约束，越限即丢弃。</li>
|
||||
<li><b>自检</b>：每次求解都用闭式 FK 与场景图真实 6 级矩阵链各算一次 TCP 和工具姿态并与目标比对（见上表残差）。</li>
|
||||
</ol>
|
||||
<hr>
|
||||
<b>验证数据（本机实测，可复现）</b>
|
||||
<table>
|
||||
<thead><tr><th>检查项</th><th>结果</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>闭式 FK vs 6 级矩阵链（1500 组随机位形）</td><td class="good">4.6 × 10⁻¹³ mm</td></tr>
|
||||
<tr><td>逆解分支重构（200 组随机可行位形）</td><td class="good">200 / 200 命中</td></tr>
|
||||
<tr><td>θ6 不变性（0° → 137°，TCP 位移）</td><td class="good">0.00 mm</td></tr>
|
||||
<tr><td>姿态参数 ↔ 旋转矩阵往返（2000 组随机）</td><td class="good">2.4 × 10⁻⁶°</td></tr>
|
||||
<tr><td>姿态重构达标率（200 组随机可行位形，step 0.5，A/B 同机）</td><td class="good">中位残差 0.0234° → <b>0.000000°</b>；>0.05° 的例数 2 → <b>0</b>（改造前文档口径 185–191/200）</td></tr>
|
||||
<tr><td>姿态解 Σ|θ| vs 改造前（60 组，step 0.25 + 连续项）</td><td>中位 +0.03°，最大 +8.4°（该例是新解更贴参考位姿、Σ|θ| 反而更大，属连续项的正常取舍而非漏解）</td></tr>
|
||||
<tr><td>位置解 vs 0.05° 参考网格（100 目标，step 0.25）</td><td class="good">中位 +0.000°，最大 +0.49°，>1° 例数 0</td></tr>
|
||||
<tr><td>全量求解耗时（60 组，step 0.25 + 连续项）</td><td>仅位置 70.6 → 63.3 ms；位置+姿态 88.8 → 81.0 ms（约 1.10×；粗扫采样量降 4.6×，但精修才是地板）</td></tr>
|
||||
<tr><td>实时续解快路（每帧 3 mm + 1.5°，240 帧）</td><td class="good">位置命中 96%、均 0.058 ms；姿态命中 65%、均 0.59 ms —— 对全量 81 ms 约 140~1400×，是交互延迟的主要收益来源</td></tr>
|
||||
<tr><td>快路结果的独立复核（fkChain / 全 6 轴 orient，非求解器自报）</td><td class="good">位置 5.5×10⁻¹³ mm · 姿态 1.7×10⁻⁶°</td></tr>
|
||||
<tr><td>姿态模式候选表长度（供互异构型/碰撞改选取样）</td><td>26 → 13（精确根集合本就只有 1~2 个，达标门收紧后可选样变少；动态碰撞改选若依赖宽候选需留意）</td></tr>
|
||||
<tr><td>滚转角交互 roll 0→90（参考位姿连续）</td><td class="good">Δθ6 = 89.99°，θ1..θ5 变化 < 0.01°</td></tr>
|
||||
<tr><td>60 个可达目标：失败次数 / 最大残差</td><td class="good">0 次 / 3.5 × 10⁻¹³ mm</td></tr>
|
||||
<tr><td>相对 0.05° 极细网格参考的最大劣化</td><td class="good">0.02°</td></tr>
|
||||
<tr><td>vs 4000 次随机多起点数值解</td><td class="good">0 / 20 次劣于数值解</td></tr>
|
||||
<tr><td>等价分支跳变 · 4 条扫描路径（修复前 → 后）</td><td class="good">>10° 跳变 14 → 5 次；最大单步 163.5° → 16.8°</td></tr>
|
||||
<tr><td>单次求解耗时</td><td>拖动跟随走快路 ~0.1 ms；全量求解默认步长下位置 ~20 ms、姿态 ~100 ms（node 侧本机实测，浏览器同量级）</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<hr>
|
||||
<b>限位</b>：电机行程各轴 ±360°（＝滑块范围）；解角取 ±180° 内的等价角——位姿以 360° 为周期，超出 ±180° 不产生新位姿。
|
||||
相邻打印件的实测机械区间封顶：J2 ∈ [−107, 128]，J4 ∈ [−112, 112]，J5 ∈ [−96, 96]，J1 / J3 / J6 可整周。
|
||||
<br><b>参考</b>：零位静态扫描 J2 [−106, 9]、J4 [−111, 16]、J5 [−95, 34] 只在其它轴全零时对固定立柱成立，已不再当可行域；
|
||||
跨组零件对（腕/法兰撞立柱那类）由胶囊碰撞模型按当前姿态实时判定（实测 J1=90° 时 J2 正端从 +8° 放到 +107°）。
|
||||
<br><b>局限</b>：胶囊模型故意不检相邻组零件对（|Δg|=1），那部分由上面的实测机械区间兜底；换模型须重跑
|
||||
scratch/probe_adj.py 更新 collide.json 的 adj。若需要更舒展的姿态，可从上方“互异构型”列表改选次优解。
|
||||
<br><b>不可达</b>：若目标超出工作空间，自动求最近可达位姿——阻尼最小二乘<b>从当前姿态锚定起步</b>（抑制退化方向的无用漂移）、固定种子的确定性重启（同一点重复解算逐位一致）、再经零空间抛光取最小总关节角的代表值；报告的距离为抛光后真实值。
|
||||
<br><b>姿态不可达</b>：姿态任务超可达空间时，阻尼最小二乘误差向量升级为 6 维（位置 mm + 姿态 deg，按 20 mm/rad 折算），返回位置与姿态联合最近的位姿，两个残差分别显示。
|
||||
<br><b>混合优先不可达</b>：位置超可达空间时，位置端锚点退化为「最近可达位置」、姿态端仍取「姿态精确、位置最近」，
|
||||
再按同一权重折中，两端各自的残差在结果栏如实列出（与位置优先的历史兜底——6 维联合 DLS——是两个不同的代表值，切换模式可得）。
|
||||
<br><b>API</b>：控制台可用 <code>IK.solver.solve([x,y,z],{step:0.25,tool:0,pose:{R:ArmIK.poseMat(az,el,roll)}})</code>；
|
||||
<code>IK.setPose(az,el,roll)</code> 可直接设定目标姿态；<code>IK.setPrio('mix',0.3)</code> 切到混合优先并设比重；
|
||||
<code>IK.solver.solveTo([x,y,z],{pose:{R:…},priority:'mix',mixW:0.3})</code> 直接取折中解（0 与 1 分别等于姿态优先 / 位置优先）。
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="row" id="jointsHead" style="justify-content:space-between;margin:8px 0 4px">
|
||||
<h3 style="margin:0">关节角度（实时联动）</h3>
|
||||
<button id="resetJoints" class="tab" style="padding:1px 7px;font-size:11px" title="将所有关节角度复位为 0°">全部归零</button>
|
||||
</div>
|
||||
<div id="joints"></div>
|
||||
<div id="treeBlock">
|
||||
<h3>零件树</h3>
|
||||
<div class="row"><button id="allOn" class="tab">全选</button><button id="allOff" class="tab">全不选</button>
|
||||
<button id="onlyPrint" class="tab">只看打印件</button></div>
|
||||
<div id="tree"></div>
|
||||
<h3>打印清单（PLA）</h3>
|
||||
<div class="kv" id="sum"></div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div id="stage">
|
||||
<canvas id="cv"></canvas>
|
||||
<div id="hud"></div>
|
||||
<div id="note"></div>
|
||||
<div id="sheet" class="theme-paper">
|
||||
<div id="sheetToolbar">
|
||||
<div class="sheet-tabs" id="sheetTabs">
|
||||
<button class="sheet-tab on" data-sheet="0"><span>📐</span> 01 正视图</button>
|
||||
<button class="sheet-tab" data-sheet="1"><span>🔍</span> 02 A-A剖视</button>
|
||||
<button class="sheet-tab" data-sheet="2"><span>💥</span> 03 爆炸图</button>
|
||||
<button class="sheet-tab" data-sheet="3"><span>📐</span> 04 侧视图</button>
|
||||
<button class="sheet-tab guide-tab" data-sheet="guide"><span>🛠️</span> 分步装配向导</button>
|
||||
</div>
|
||||
|
||||
<div class="sheet-vsep"></div>
|
||||
|
||||
<div class="sheet-btn-group" title="图纸风格主题">
|
||||
<button class="sheet-btn on" data-theme="paper" title="工程白纸图纸">白图</button>
|
||||
<button class="sheet-btn" data-theme="blueprint" title="经典工程蓝图">蓝图</button>
|
||||
<button class="sheet-btn" data-theme="dark" title="工业深色风格">深色</button>
|
||||
</div>
|
||||
|
||||
<div class="sheet-vsep"></div>
|
||||
|
||||
<div class="sheet-layers" title="图层显示控制">
|
||||
<label title="显示/隐藏气球标号与引线"><input type="checkbox" id="chkLyrBalloons" checked> 标号</label>
|
||||
<label title="显示/隐藏尺寸与基准标注"><input type="checkbox" id="chkLyrDims" checked> 尺寸</label>
|
||||
<label title="显示/隐藏关节轴线"><input type="checkbox" id="chkLyrAxes" checked> 轴线</label>
|
||||
<label title="显示/隐藏图内零件明细表"><input type="checkbox" id="chkLyrLegend" checked> 零件表</label>
|
||||
</div>
|
||||
|
||||
<div class="sheet-space"></div>
|
||||
|
||||
<button class="sheet-btn sheet-btn-accent" id="btnSheetTo3D" title="在三维模型中定位查看当前选中的部件">
|
||||
<span>🧊 3D模型联动</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="sheetViewport">
|
||||
<div id="sheetCanvas">
|
||||
<div id="sheetSvgWrapper"></div>
|
||||
</div>
|
||||
|
||||
<div id="sheetFloatBar">
|
||||
<button class="sfb-btn" id="sfbIn" title="放大 (滚轮向上)">➕</button>
|
||||
<button class="sfb-btn" id="sfbOut" title="缩小 (滚轮向下)">➖</button>
|
||||
<button class="sfb-btn" id="sfbFit" title="自适应窗口居中 (双击空白处)">⛶ 适屏</button>
|
||||
<button class="sfb-btn" id="sfb100" title="100% 原始比例">1:1</button>
|
||||
<button class="sfb-btn" id="sfbReset" title="重置视角">↺ 复位</button>
|
||||
<button class="sfb-btn" id="sfbFull" title="全屏视口">⛶ 全屏</button>
|
||||
</div>
|
||||
|
||||
<div id="sheetZoomBadge" title="点击重置为 100%">100%</div>
|
||||
|
||||
<div id="sheetTooltip" class="sheet-tooltip"></div>
|
||||
</div>
|
||||
|
||||
<!-- 分步装配向导面板 -->
|
||||
<div id="sheetGuideView" style="display:none">
|
||||
<div class="guide-header">
|
||||
<div class="guide-steps-bar" id="guideStepsBar">
|
||||
<!-- 步骤 chips 动态渲染 -->
|
||||
</div>
|
||||
<button class="sheet-btn" id="btnExitGuide" style="margin-left:auto">✕ 返回图纸</button>
|
||||
</div>
|
||||
<div class="guide-body">
|
||||
<div class="guide-panel-left" id="guidePanelLeft">
|
||||
<!-- 当前步骤详情动态渲染 -->
|
||||
</div>
|
||||
<div class="guide-panel-right">
|
||||
<div id="guideCanvasWrapper" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;">
|
||||
<!-- 步骤关联图纸与高亮 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<span id="footModel">左键旋转 · 滚轮缩放 · 右键平移（拖动） · 单击选中高亮 · <b>BOM 点螺丝行 = 高亮定位该规格螺钉（穿透显示）</b> · <b>右键单击隐藏部件（或按H键）</b> · 左侧全选/勾选恢复<span id="footIk"> · <b>运动模拟</b>：拖动黄色目标球到点（Shift 仅上下）· 开「姿态控制」后可拖箭头调末端朝向、拖箭杆或粉色侧球调滚转</span></span>
|
||||
<span id="footSheet" style="display:none"><b>装配工程图纸</b>：滚轮缩放 · 按住左键/中键拖拽平移 · 双击自适应视口 · 悬停气球标号/零件轮廓双向高亮 · <b>点击部件卡片「在 3D 中定位」</b></span>
|
||||
<span class="sp"></span>
|
||||
<span id="stat"></span>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<button id="bomTab" title="展开 / 收起 物料清单 BOM">物料清单 <b>BOM</b></button>
|
||||
<aside id="bomDock">
|
||||
<div class="dk-hd">
|
||||
<b>物料清单 BOM</b><span class="q" id="bomStat"></span>
|
||||
<button id="bomHide" class="dk-x" title="收起">收起 ▶</button>
|
||||
</div>
|
||||
<div class="dk-bd">
|
||||
<div class="dk-sec">紧固件 / 螺丝清单（全部紧固点）</div>
|
||||
<div class="dk-note" id="scrSum"></div>
|
||||
<table id="screws"><thead><tr><th>规格</th><th>长 mm</th><th>数量</th><th>位置 / 用途</th></tr></thead><tbody></tbody></table>
|
||||
<div class="dk-sec">打印件 BOM（原明细，PLA）</div>
|
||||
<table id="bom"><thead><tr><th>#</th><th>件号</th><th>cm3</th><th>g</th></tr></thead><tbody></tbody></table>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<script src="vendor/three.min.js"></script>
|
||||
<!-- 数据与螺钉清单是生成物（webapp/generated/00_data.js），由 python -m arm.viewer.build_viewer 写 -->
|
||||
<script src="generated/00_data.js"></script>
|
||||
<script src="js/app.js"></script>
|
||||
<script src="js/ik-solver.js"></script>
|
||||
<script src="js/ik-glue.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+1805
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,69 @@
|
||||
/* 设计令牌、reset、整体栅格与左栏/树/页脚 */
|
||||
:root{--bg:#0f1115;--pan:#171a21;--pan2:#1f242e;--tx:#e6e8ee;--dim:#8b93a7;--ac:#4c9aff;--ok:#3ddc97;--warn:#ffb454;--line:#2b323e}
|
||||
*{box-sizing:border-box}
|
||||
html,body{margin:0;height:100%;background:var(--bg);color:var(--tx);
|
||||
font:13px/1.55 "Microsoft YaHei","Segoe UI",system-ui,sans-serif;overflow:hidden;
|
||||
-webkit-user-select:none;user-select:none}
|
||||
#app{display:grid;grid-template-columns:322px minmax(430px,1fr);grid-template-rows:46px auto 1fr 26px;
|
||||
height:100%;min-width:0;overflow-x:auto}
|
||||
header{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:0 12px;flex-wrap:nowrap;
|
||||
overflow-x:auto;overflow-y:hidden;background:var(--pan);border-bottom:1px solid var(--line)}
|
||||
header .q{white-space:nowrap;flex:none;color:var(--dim);font-size:12px}
|
||||
header b{font-size:14px;white-space:nowrap;flex:none}
|
||||
header .sp{flex:1 1 auto;min-width:6px}
|
||||
button,select{background:var(--pan2);color:var(--tx);border:1px solid var(--line);
|
||||
border-radius:5px;padding:4px 9px;font:inherit;cursor:pointer;white-space:nowrap;flex:none}
|
||||
button:hover{border-color:var(--ac);color:#fff}
|
||||
button.on{background:#22406b;border-color:var(--ac)}
|
||||
#bHarn.on{background:#5c3b1e;border-color:#f59e0b;color:#fbbf24}
|
||||
aside{background:var(--pan);overflow:auto;padding:8px;min-width:0}
|
||||
#left{border-right:1px solid var(--line)}
|
||||
#app.l{grid-template-columns:322px minmax(430px,1fr)}
|
||||
#stage{position:relative;overflow:hidden;min-width:0;
|
||||
background:radial-gradient(120% 120% at 50% 0%,#1b2028 0%,#0d0f13 70%)}
|
||||
canvas{display:block;width:100%;height:100%}
|
||||
footer{grid-column:1/-1;background:var(--pan);border-top:1px solid var(--line);
|
||||
display:flex;align-items:center;gap:14px;padding:0 12px;color:var(--dim);font-size:12px;
|
||||
white-space:nowrap;overflow:hidden}
|
||||
@media (max-width:1150px){
|
||||
#app{grid-template-columns:300px minmax(400px,1fr)}
|
||||
}
|
||||
@media (max-width:760px){
|
||||
#app{grid-template-columns:minmax(0,1fr)}
|
||||
#left{display:none}
|
||||
#app.l #left{display:block}
|
||||
}
|
||||
h3{font-size:12px;margin:10px 0 6px;color:var(--ac);letter-spacing:.4px;-webkit-user-select:none;user-select:none}
|
||||
.row{display:flex;align-items:center;gap:6px;margin:3px 0}
|
||||
.row label{flex:1;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}
|
||||
.row .q{color:var(--dim);font-size:11px;-webkit-user-select:none;user-select:none}
|
||||
.chip{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;flex:none}
|
||||
.pr{color:var(--ok)}.ex{color:var(--warn)}.mo{color:#9aa4b8}
|
||||
table{width:100%;border-collapse:collapse;font-size:11.5px;-webkit-user-select:text;user-select:text}
|
||||
th,td{border-bottom:1px solid var(--line);padding:3px 4px;text-align:left;vertical-align:top}
|
||||
th{color:var(--dim);font-weight:400;position:sticky;top:0;background:var(--pan);-webkit-user-select:none;user-select:none}
|
||||
.j-box{margin-bottom:7px;padding:3px 4px 1px;border-radius:4px;transition:background .15s}
|
||||
.j-box:hover{background:rgba(255,255,255,.03)}
|
||||
.j-box label{cursor:default;font-weight:500}
|
||||
.j-val{font-size:11px;color:var(--ac);cursor:pointer;padding:1px 5px;border-radius:3px;
|
||||
background:rgba(76,154,255,.1);font-variant-numeric:tabular-nums;transition:all .15s;
|
||||
-webkit-user-select:none;user-select:none}
|
||||
.j-val:hover{background:var(--ac);color:#fff}
|
||||
input[type=range]{width:100%;height:18px;accent-color:var(--ac);cursor:pointer;display:block;margin:1px 0}
|
||||
label em{font-style:normal;color:var(--mu);font-size:10.5px;margin-left:4px}
|
||||
label em.ok{color:#5ddc90}
|
||||
.gr{font-size:11px;color:var(--dim);margin:2px 0 4px;-webkit-user-select:none;user-select:none}
|
||||
#hud{position:absolute;left:10px;top:8px;pointer-events:none;font-size:11.5px;color:var(--dim);
|
||||
background:rgba(15,17,21,.72);border:1px solid var(--line);border-radius:6px;padding:6px 9px;max-width:60%}
|
||||
#hud b{color:var(--tx)}
|
||||
#hud:empty{display:none}
|
||||
#note{position:absolute;right:10px;bottom:10px;max-width:330px;background:rgba(15,17,21,.88);
|
||||
border:1px solid var(--ac);border-radius:7px;padding:8px 10px;font-size:12px;display:none;
|
||||
-webkit-user-select:text;user-select:text}
|
||||
.kv{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;font-size:11.5px;-webkit-user-select:text;user-select:text}
|
||||
.kv i{color:var(--dim);font-style:normal;-webkit-user-select:none;user-select:none}
|
||||
.tab{padding:4px 9px;-webkit-user-select:none;user-select:none}
|
||||
.bad{color:#ff6b6b}.good{color:var(--ok)}
|
||||
svg{display:block;width:100%;height:auto;background:#fff;border-radius:6px}
|
||||
#sheet{display:none;padding:10px;overflow:auto;height:100%}
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
/* 右边缘可收起 BOM 抽屉 */
|
||||
/* ---- edge BOM dock (collapsible drawer at the right edge) ---- */
|
||||
#bomTab{position:fixed;right:0;top:64px;z-index:30;writing-mode:vertical-rl;text-orientation:mixed;
|
||||
background:var(--pan2);color:var(--tx);border:1px solid var(--line);border-right:none;
|
||||
border-radius:6px 0 0 6px;padding:12px 6px;font:inherit;cursor:pointer;letter-spacing:3px}
|
||||
#bomTab:hover{border-color:var(--ac);color:#fff}
|
||||
#bomTab b{color:var(--ac)}
|
||||
#bomDock{position:fixed;right:0;top:46px;bottom:26px;width:min(430px,94vw);z-index:29;
|
||||
transform:translateX(103%);transition:transform .22s ease;display:flex;flex-direction:column;
|
||||
background:var(--pan);border-left:1px solid var(--ac);box-shadow:-10px 0 28px rgba(0,0,0,.5)}
|
||||
#bomDock.open{transform:none}
|
||||
#bomDock .dk-hd{display:flex;align-items:center;gap:8px;padding:9px 10px;flex:none;
|
||||
border-bottom:1px solid var(--line)}
|
||||
#bomDock .dk-hd b{font-size:13px}
|
||||
#bomDock .dk-hd .q{color:var(--dim);font-size:11px;min-width:0;flex:0 1 auto;
|
||||
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
#bomDock .dk-x{margin-left:auto}
|
||||
#bomDock .dk-bd{overflow:auto;padding:8px 11px 16px;flex:1;min-height:0}
|
||||
.dk-sec{margin:4px 0 5px;color:var(--ac);font-size:12px;letter-spacing:.4px}
|
||||
.dk-note{color:var(--dim);font-size:11px;margin:1px 0 6px}
|
||||
#screws td{white-space:normal}
|
||||
#screws td:first-child{white-space:nowrap}
|
||||
#screws tbody tr{cursor:pointer;transition:background .12s}
|
||||
#screws tbody tr:hover{background:rgba(76,154,255,.14)}
|
||||
#screws tbody tr.scrHl{background:#1d3f74;box-shadow:inset 3px 0 0 var(--warn)}
|
||||
.hudlink{pointer-events:auto;cursor:pointer;color:var(--ac);text-decoration:underline;margin-left:8px}
|
||||
@media (max-width:760px){#bomTab{top:auto;bottom:36px}#bomDock{top:46px;bottom:26px}}
|
||||
|
||||
@@ -0,0 +1,154 @@
|
||||
/* 分步装配向导面板 */
|
||||
/* 分步装配向导面板样式 */
|
||||
#sheetGuideView {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: var(--bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 15;
|
||||
overflow: hidden;
|
||||
}
|
||||
.guide-header {
|
||||
padding: 8px 14px;
|
||||
background: var(--pan);
|
||||
border-bottom: 1px solid var(--line);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
flex: none;
|
||||
}
|
||||
.guide-steps-bar {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
overflow-x: auto;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
.guide-step-chip {
|
||||
background: var(--pan2);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 20px;
|
||||
padding: 4px 12px;
|
||||
font-size: 11.5px;
|
||||
color: var(--dim);
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
white-space: nowrap;
|
||||
transition: all .15s;
|
||||
}
|
||||
.guide-step-chip:hover {
|
||||
border-color: var(--warn);
|
||||
color: var(--tx);
|
||||
}
|
||||
.guide-step-chip.active {
|
||||
background: #78350f;
|
||||
border-color: #f59e0b;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 0 10px rgba(245,158,11,.3);
|
||||
}
|
||||
.guide-body {
|
||||
display: grid;
|
||||
grid-template-columns: 360px 1fr;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.guide-body {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
}
|
||||
}
|
||||
.guide-panel-left {
|
||||
background: var(--pan);
|
||||
border-right: 1px solid var(--line);
|
||||
overflow-y: auto;
|
||||
padding: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.guide-panel-right {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #0f1217;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.guide-card {
|
||||
background: var(--pan2);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
.guide-card-title {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: var(--warn);
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.guide-part-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
.guide-part-badge {
|
||||
background: rgba(255,255,255,.05);
|
||||
border: 1px solid rgba(255,255,255,.1);
|
||||
border-radius: 4px;
|
||||
padding: 3px 7px;
|
||||
font-size: 11px;
|
||||
color: var(--tx);
|
||||
cursor: pointer;
|
||||
transition: all .15s;
|
||||
}
|
||||
.guide-part-badge:hover {
|
||||
border-color: var(--ac);
|
||||
background: rgba(76,154,255,.15);
|
||||
color: #fff;
|
||||
}
|
||||
.guide-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: auto;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.guide-btn {
|
||||
flex: 1;
|
||||
padding: 7px 0;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
transition: all .15s;
|
||||
}
|
||||
.guide-btn-nav {
|
||||
background: var(--pan2);
|
||||
border: 1px solid var(--line);
|
||||
color: var(--tx);
|
||||
}
|
||||
.guide-btn-nav:hover {
|
||||
border-color: var(--ac);
|
||||
color: #fff;
|
||||
}
|
||||
.guide-btn-3d {
|
||||
background: linear-gradient(135deg, #b45309, #d97706);
|
||||
border: 1px solid #f59e0b;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
.guide-btn-3d:hover {
|
||||
background: linear-gradient(135deg, #d97706, #f59e0b);
|
||||
}
|
||||
small{color:var(--dim)}
|
||||
@@ -0,0 +1,67 @@
|
||||
/* IK 控制条与左栏结果面板 */
|
||||
/* ===================== IK 控制条（两行：目标+姿态 / 模式+状态） ===================== */
|
||||
#ikbar{grid-column:1/-1;display:flex;flex-direction:column;gap:4px;padding:5px 10px;
|
||||
background:linear-gradient(180deg,#1c212b,#161922);border-bottom:1px solid var(--line)}
|
||||
#ikbar .ikrow{display:flex;align-items:center;gap:6px;min-height:26px;
|
||||
overflow-x:auto;overflow-y:hidden;white-space:nowrap}
|
||||
#ikbar .ik-t{color:var(--ac);font-weight:700;letter-spacing:.8px;flex:none;font-size:11.5px;
|
||||
border:1px solid var(--ac);border-radius:4px;padding:1px 6px}
|
||||
#ikbar .lb{color:var(--dim);flex:none;font-size:12px}
|
||||
#ikbar input[type=number]{width:68px;background:#0d1015;color:var(--tx);border:1px solid var(--line);
|
||||
border-radius:4px;padding:3px 5px;font:inherit;font-variant-numeric:tabular-nums;flex:none}
|
||||
#ikbar input[type=number]:focus{outline:none;border-color:var(--ac)}
|
||||
#ikbar .vsep{width:1px;height:20px;background:var(--line);flex:none;margin:0 3px}
|
||||
#ikbar .st{color:var(--dim);flex:none;font-size:11.5px;font-variant-numeric:tabular-nums}
|
||||
#ikbar .sep{color:#3b4453;margin:0 5px}
|
||||
#ikbar .hint{color:var(--dim);font-size:11px;flex:none}
|
||||
#ikbar .good{color:var(--ok)} #ikbar .bad{color:#ff6b6b} #ikbar .hi{color:var(--warn)}
|
||||
#ikSolve{background:#1d3f74;border-color:var(--ac);color:#fff;font-weight:600}
|
||||
#ikSolve:hover{background:#24508f}
|
||||
#ikPose.on{background:#3a2b63;border-color:#a06bff;color:#fff;font-weight:600}
|
||||
#ikPoseBox{display:none;align-items:center;gap:6px}
|
||||
#ikPoseBox input[type=number]{width:54px}
|
||||
#ikMixBox{display:none;align-items:center;gap:6px;flex:none}
|
||||
#ikMixBox input[type=range]{width:118px;flex:none;accent-color:var(--ac);cursor:pointer}
|
||||
#ikMixBox .st{min-width:56px}
|
||||
|
||||
/* ===================== IK 结果面板（左栏顶部） ===================== */
|
||||
#ikpanel{margin:0 0 10px;border:1px solid var(--line);border-radius:6px;background:#141821;padding:7px 8px}
|
||||
/* 徽标必须可换行：CJK 的最小内容宽度＝一个字，若徽标 nowrap+flex:none，
|
||||
长状态文案会把标题压成竖排一字一行（实测 h3 缩到 12px） */
|
||||
#ikpanel .ikh{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-bottom:5px}
|
||||
#ikpanel .ikh h3{margin:0;font-size:12px;color:var(--ac);letter-spacing:.3px;
|
||||
min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
.badge{margin-left:auto;font-size:10.5px;padding:1px 7px;border-radius:9px;border:1px solid;
|
||||
flex:0 1 auto;max-width:100%;text-align:center;line-height:1.35;text-wrap:balance}
|
||||
.badge.wait{color:var(--dim);border-color:var(--line)}
|
||||
.badge.goodb{color:#0c1a12;background:var(--ok);border-color:var(--ok)}
|
||||
.badge.warnb{color:#241a06;background:var(--warn);border-color:var(--warn)}
|
||||
.badge.badb{color:#2a0a0a;background:#ff6b6b;border-color:#ff6b6b}
|
||||
#ikTab{font-size:11px}
|
||||
#ikTab td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
|
||||
#ikTab td.dim{color:var(--dim);white-space:nowrap}
|
||||
#ikpanel .kv{margin-top:6px}
|
||||
#ikpanel .kv i{white-space:nowrap}
|
||||
#ikpanel .kv span,#ikpanel .kv b{overflow-wrap:anywhere;word-break:break-word;min-width:0}
|
||||
#ikpanel .good{color:var(--ok)} #ikpanel .bad{color:#ff6b6b}
|
||||
#ikpanel .kv .hi{color:var(--warn);font-variant-numeric:tabular-nums}
|
||||
#ikAltN{font-size:10.5px;color:var(--dim);margin:7px 0 3px;line-height:1.45;white-space:normal}
|
||||
.altrow{display:flex;align-items:center;gap:5px;padding:2px 4px;border-radius:4px;cursor:pointer;
|
||||
font-size:11px;font-variant-numeric:tabular-nums;color:var(--dim)}
|
||||
.altrow:hover{background:rgba(76,154,255,.16)}
|
||||
.altrow .ai{color:#5b6478;width:10px;flex:none;text-align:right}
|
||||
.altrow b{color:var(--ac);width:54px;flex:none;text-align:right;font-weight:500}
|
||||
.altrow .aq{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
#ikpanel details{margin-top:8px;border-top:1px solid var(--line);padding-top:6px}
|
||||
#ikpanel details>summary{cursor:pointer;color:var(--ac);font-size:11.5px;outline:none}
|
||||
#ikpanel details .doc{margin-top:5px;font-size:11px;color:var(--dim);line-height:1.7;white-space:normal;
|
||||
-webkit-user-select:text;user-select:text}
|
||||
#ikpanel details .doc b{color:var(--tx)}
|
||||
#ikpanel details .doc code{color:var(--warn);font-family:Consolas,"Courier New",monospace;font-size:10.5px}
|
||||
#ikpanel details .doc ol{margin:3px 0 3px 16px;padding:0}
|
||||
#ikpanel details .doc li{margin:3px 0}
|
||||
#ikpanel details .doc hr{border:none;border-top:1px solid var(--line);margin:6px 0}
|
||||
#ikpanel .src{font-size:10.5px;color:var(--dim);margin-top:5px;white-space:normal;line-height:1.5}
|
||||
#ikChkBox{margin-top:7px}
|
||||
#ikChkBox summary{margin-bottom:2px}
|
||||
|
||||
@@ -0,0 +1,191 @@
|
||||
/* 装配图工具栏、页签、主视口与画布 */
|
||||
/* ==================== 交互式装配图查看器 (Interactive Assembly Drawing) ==================== */
|
||||
#sheet {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0; left: 0; width: 100%; height: 100%;
|
||||
flex-direction: column;
|
||||
background: #11141a;
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
padding: 0;
|
||||
}
|
||||
body.sheet-mode #sheet {
|
||||
display: flex !important;
|
||||
}
|
||||
/* 隐藏 3D 专属工具条按钮（当处于装配图时） */
|
||||
body.sheet-mode #bAsm,
|
||||
body.sheet-mode #bExp,
|
||||
body.sheet-mode #exp,
|
||||
body.sheet-mode #cam,
|
||||
body.sheet-mode #bWire,
|
||||
body.sheet-mode #bXRay,
|
||||
body.sheet-mode #bScr,
|
||||
body.sheet-mode #bHarn,
|
||||
body.sheet-mode #bEnv,
|
||||
body.sheet-mode #bFit {
|
||||
display: none !important;
|
||||
}
|
||||
body.sheet-mode footer #footModel { display: none !important; }
|
||||
body.sheet-mode footer #footSheet { display: inline !important; }
|
||||
|
||||
/* 顶部装配图工具栏 */
|
||||
#sheetToolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 12px;
|
||||
background: var(--pan);
|
||||
border-bottom: 1px solid var(--line);
|
||||
flex: none;
|
||||
min-height: 40px;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.sheet-tabs {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
}
|
||||
.sheet-tab {
|
||||
background: var(--pan2);
|
||||
color: var(--tx);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 5px;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
transition: all .15s ease;
|
||||
}
|
||||
.sheet-tab:hover {
|
||||
border-color: var(--ac);
|
||||
color: #fff;
|
||||
}
|
||||
.sheet-tab.on {
|
||||
background: #1e3a66;
|
||||
border-color: var(--ac);
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 0 10px rgba(76,154,255,.25);
|
||||
}
|
||||
.sheet-tab.guide-tab {
|
||||
background: rgba(245, 158, 11, 0.12);
|
||||
border-color: rgba(245, 158, 11, 0.4);
|
||||
color: #f59e0b;
|
||||
}
|
||||
.sheet-tab.guide-tab.on {
|
||||
background: #78350f;
|
||||
border-color: #f59e0b;
|
||||
color: #fef3c7;
|
||||
box-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
|
||||
}
|
||||
|
||||
.sheet-vsep {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background: var(--line);
|
||||
margin: 0 4px;
|
||||
flex: none;
|
||||
}
|
||||
.sheet-btn-group {
|
||||
display: flex;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
flex: none;
|
||||
}
|
||||
.sheet-btn-group .sheet-btn {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
padding: 3px 8px;
|
||||
font-size: 11.5px;
|
||||
background: var(--pan2);
|
||||
border-right: 1px solid var(--line);
|
||||
cursor: pointer;
|
||||
}
|
||||
.sheet-btn-group .sheet-btn:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.sheet-btn-group .sheet-btn.on {
|
||||
background: var(--ac);
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
.sheet-layers {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
font-size: 11.5px;
|
||||
color: var(--dim);
|
||||
}
|
||||
.sheet-layers label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.sheet-layers input[type=checkbox] {
|
||||
accent-color: var(--ac);
|
||||
cursor: pointer;
|
||||
}
|
||||
.sheet-space {
|
||||
flex: 1;
|
||||
min-width: 8px;
|
||||
}
|
||||
.sheet-btn-accent {
|
||||
background: linear-gradient(135deg, #1d4ed8, #2563eb);
|
||||
color: #fff;
|
||||
border: 1px solid #60a5fa;
|
||||
font-weight: 500;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: all .15s;
|
||||
}
|
||||
.sheet-btn-accent:hover {
|
||||
background: linear-gradient(135deg, #2563eb, #3b82f6);
|
||||
box-shadow: 0 0 12px rgba(96,165,250,.4);
|
||||
}
|
||||
|
||||
/* 主视口区域 */
|
||||
#sheetViewport {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
cursor: grab;
|
||||
background: #0f1217;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
#sheetViewport.is-dragging {
|
||||
cursor: grabbing !important;
|
||||
}
|
||||
|
||||
/* 画布与缩放平移 */
|
||||
#sheetCanvas {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
transform-origin: 0 0;
|
||||
will-change: transform;
|
||||
}
|
||||
#sheetSvgWrapper {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,.5);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
#sheetSvgWrapper svg {
|
||||
display: block;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,128 @@
|
||||
/* 悬停 Tooltip 与 SVG 零件高亮 */
|
||||
/* 悬停 Tooltip HUD */
|
||||
.sheet-tooltip {
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
background: rgba(15, 17, 21, 0.94);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid var(--ac);
|
||||
border-radius: 7px;
|
||||
padding: 8px 12px;
|
||||
font-size: 12px;
|
||||
color: var(--tx);
|
||||
box-shadow: 0 10px 28px rgba(0,0,0,.6);
|
||||
pointer-events: none;
|
||||
display: none;
|
||||
max-width: 310px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.sheet-tooltip.pinned {
|
||||
pointer-events: auto;
|
||||
border-color: #38bdf8;
|
||||
box-shadow: 0 12px 36px rgba(0, 168, 255, 0.35);
|
||||
}
|
||||
.sheet-tooltip .st-title {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
padding-bottom: 4px;
|
||||
border-bottom: 1px solid rgba(255,255,255,.1);
|
||||
}
|
||||
.sheet-tooltip .st-tag {
|
||||
font-size: 10px;
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.st-tag.pr { background: rgba(61,220,151,.2); color: var(--ok); }
|
||||
.st-tag.ex { background: rgba(255,180,84,.2); color: var(--warn); }
|
||||
.sheet-tooltip .st-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
font-size: 11px;
|
||||
color: var(--dim);
|
||||
margin: 2px 0;
|
||||
}
|
||||
.sheet-tooltip .st-row span:last-child {
|
||||
color: var(--tx);
|
||||
text-align: right;
|
||||
}
|
||||
.sheet-tooltip .st-btn {
|
||||
margin-top: 6px;
|
||||
width: 100%;
|
||||
padding: 4px 0;
|
||||
font-size: 11px;
|
||||
background: #1d4ed8;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
transition: background .15s;
|
||||
}
|
||||
.sheet-tooltip .st-btn:hover {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
/* SVG 交互高亮样式 */
|
||||
.sheet-part-path {
|
||||
cursor: pointer;
|
||||
transition: stroke .12s, stroke-width .12s, filter .12s;
|
||||
}
|
||||
.sheet-part-path.is-hovered {
|
||||
stroke: #00d2ff !important;
|
||||
stroke-width: 2.8px !important;
|
||||
fill: rgba(0, 210, 255, 0.16) !important;
|
||||
filter: drop-shadow(0 0 5px #00a8ff) !important;
|
||||
}
|
||||
.sheet-balloon {
|
||||
cursor: pointer;
|
||||
transition: transform .15s ease;
|
||||
}
|
||||
.sheet-balloon:hover .balloon-circle,
|
||||
.sheet-balloon.is-hovered .balloon-circle {
|
||||
fill: #0284c7 !important;
|
||||
stroke: #ffffff !important;
|
||||
stroke-width: 2px !important;
|
||||
filter: drop-shadow(0 0 6px rgba(2,132,199,.8)) !important;
|
||||
}
|
||||
.sheet-balloon:hover .balloon-text,
|
||||
.sheet-balloon.is-hovered .balloon-text {
|
||||
fill: #ffffff !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
.sheet-leader.is-hovered {
|
||||
stroke: #00d2ff !important;
|
||||
stroke-width: 1.8px !important;
|
||||
}
|
||||
.sheet-legend-row {
|
||||
cursor: pointer;
|
||||
}
|
||||
.sheet-legend-row:hover .legend-row-bg,
|
||||
.sheet-legend-row.is-hovered .legend-row-bg {
|
||||
fill: rgba(2, 132, 199, 0.3) !important;
|
||||
}
|
||||
.sheet-legend-row:hover text,
|
||||
.sheet-legend-row.is-hovered text {
|
||||
fill: #00d2ff !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
.joint-geom-part {
|
||||
cursor: pointer;
|
||||
transition: all .15s;
|
||||
}
|
||||
.joint-geom-part:hover, .joint-geom-part.is-hovered {
|
||||
stroke: #00d2ff !important;
|
||||
stroke-width: 2.2px !important;
|
||||
fill: rgba(0, 210, 255, 0.15) !important;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,149 @@
|
||||
/* 图纸主题（白图/蓝图/深色）、浮动工具条、缩放徽标、信息条 */
|
||||
/* 视觉风格主题 */
|
||||
#sheet.theme-paper #sheetViewport {
|
||||
background: #cbd5e1;
|
||||
}
|
||||
#sheet.theme-paper #sheetSvgWrapper {
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,.35);
|
||||
}
|
||||
|
||||
#sheet.theme-blueprint #sheetViewport {
|
||||
background: #06182c;
|
||||
background-image:
|
||||
linear-gradient(rgba(14, 116, 144, 0.15) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(14, 116, 144, 0.15) 1px, transparent 1px);
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
#sheet.theme-blueprint #sheetSvgWrapper {
|
||||
box-shadow: 0 0 40px rgba(14, 165, 233, 0.25);
|
||||
border: 1px solid rgba(56, 189, 248, 0.3);
|
||||
}
|
||||
#sheet.theme-blueprint .sheet-bg {
|
||||
fill: #0a2240 !important;
|
||||
}
|
||||
#sheet.theme-blueprint .sheet-border-outer,
|
||||
#sheet.theme-blueprint .sheet-border-inner,
|
||||
#sheet.theme-blueprint .sheet-title-line,
|
||||
#sheet.theme-blueprint .sheet-meta-line {
|
||||
stroke: #38bdf8 !important;
|
||||
}
|
||||
#sheet.theme-blueprint .sheet-title-text {
|
||||
fill: #f0f9ff !important;
|
||||
}
|
||||
#sheet.theme-blueprint .sheet-note-text,
|
||||
#sheet.theme-blueprint .sheet-scale-text,
|
||||
#sheet.theme-blueprint .sheet-ver-text {
|
||||
fill: #bae6fd !important;
|
||||
}
|
||||
#sheet.theme-blueprint .sheet-axis,
|
||||
#sheet.theme-blueprint .sheet-axis-label,
|
||||
#sheet.theme-blueprint .sheet-dim-line,
|
||||
#sheet.theme-blueprint .sheet-dim-ext,
|
||||
#sheet.theme-blueprint .sheet-dim-text {
|
||||
stroke: #7dd3fc !important;
|
||||
fill: #7dd3fc !important;
|
||||
}
|
||||
|
||||
#sheet.theme-dark #sheetViewport {
|
||||
background: #090b0e;
|
||||
}
|
||||
#sheet.theme-dark .sheet-bg {
|
||||
fill: #14171d !important;
|
||||
}
|
||||
#sheet.theme-dark .sheet-border-outer,
|
||||
#sheet.theme-dark .sheet-border-inner,
|
||||
#sheet.theme-dark .sheet-title-line,
|
||||
#sheet.theme-dark .sheet-meta-line {
|
||||
stroke: #374151 !important;
|
||||
}
|
||||
#sheet.theme-dark .sheet-title-text {
|
||||
fill: #f3f4f6 !important;
|
||||
}
|
||||
#sheet.theme-dark .sheet-note-text,
|
||||
#sheet.theme-dark .sheet-scale-text,
|
||||
#sheet.theme-dark .sheet-ver-text {
|
||||
fill: #9ca3af !important;
|
||||
}
|
||||
|
||||
/* 浮动工具条 */
|
||||
#sheetFloatBar {
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
top: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
z-index: 25;
|
||||
}
|
||||
.sfb-btn {
|
||||
background: rgba(23, 26, 33, 0.88);
|
||||
backdrop-filter: blur(8px);
|
||||
color: var(--tx);
|
||||
border: 1px solid rgba(255,255,255,.12);
|
||||
border-radius: 6px;
|
||||
padding: 6px 10px;
|
||||
font-size: 11.5px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,.35);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 36px;
|
||||
transition: all .15s ease;
|
||||
}
|
||||
.sfb-btn:hover {
|
||||
background: #1e3a66;
|
||||
border-color: var(--ac);
|
||||
color: #fff;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* 缩放指示徽标 */
|
||||
#sheetZoomBadge {
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
bottom: 12px;
|
||||
background: rgba(15, 17, 21, 0.82);
|
||||
backdrop-filter: blur(6px);
|
||||
border: 1px solid var(--line);
|
||||
color: var(--dim);
|
||||
font-size: 11px;
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
cursor: pointer;
|
||||
z-index: 20;
|
||||
}
|
||||
#sheetZoomBadge:hover {
|
||||
color: var(--ac);
|
||||
border-color: var(--ac);
|
||||
}
|
||||
|
||||
/* 信息条 */
|
||||
#sheetInfoBar {
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
bottom: 12px;
|
||||
max-width: 70%;
|
||||
background: rgba(15, 17, 21, 0.85);
|
||||
backdrop-filter: blur(6px);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 5px;
|
||||
padding: 4px 10px;
|
||||
font-size: 11.5px;
|
||||
color: var(--dim);
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#sheetInfoBar b {
|
||||
color: var(--tx);
|
||||
}
|
||||
.sheet-info-sep {
|
||||
color: var(--line);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
/* 视图模式切换时的布局与显隐规则 */
|
||||
/* ============ 视图模式：三维模型（静态） / 装配图 / 运动模拟 ============ */
|
||||
/* 三维模型 与 装配图 下，全部运动学 UI 一律隐藏 */
|
||||
body:not(.motion) #ikbar,
|
||||
body:not(.motion) #ikpanel,
|
||||
body:not(.motion) #joints,
|
||||
body:not(.motion) #jointsHead,
|
||||
body:not(.motion) #footIk{display:none!important}
|
||||
/* 运动模拟只看运动：左栏去掉零件树与打印清单（其它模式保留） */
|
||||
body.motion #treeBlock{display:none!important}
|
||||
|
||||
/* 运动模拟左栏紧凑化：目标一屏放下、不下拉（实测原需下拉 127px） */
|
||||
#ikpanel{margin:0 0 6px;padding:5px 8px}
|
||||
#ikpanel .ikh{margin-bottom:3px}
|
||||
#ikpanel #ikTab th,#ikpanel #ikTab td{padding:1px 4px}
|
||||
#ikAltN{margin:5px 0 2px}
|
||||
.altrow{padding:1px 4px}
|
||||
#joints .j-box{margin-bottom:4px}
|
||||
#joints input[type=range]{height:15px}
|
||||
/* 显式行定位：IK 控制条在「三维模型/装配图」下被移除后，
|
||||
若不固定行号，网格自动排布会把页脚挤到 1fr 行并压扁（已实测） */
|
||||
#app>header{grid-row:1}
|
||||
#ikbar{grid-row:2}
|
||||
#left{grid-row:3}
|
||||
#stage{grid-row:3}
|
||||
#app>footer{grid-row:4}
|
||||
/* BOM 抽屉：运动模拟多一条两行 IK 控制条（实测 75px），需整体下移 */
|
||||
#bomDock{top:46px} #bomTab{top:64px}
|
||||
body.motion #bomDock{top:124px} body.motion #bomTab{top:140px}
|
||||
@media (max-width:760px){
|
||||
#bomTab,body.motion #bomTab{top:auto;bottom:36px}
|
||||
#bomDock,body.motion #bomDock{top:86px;bottom:26px}
|
||||
}
|
||||
Vendored
+7
File diff suppressed because one or more lines are too long
@@ -0,0 +1,31 @@
|
||||
/* IK 求解 Worker（module 之外的经典 Worker，用 importScripts 取 UMD 求解器）。
|
||||
协议：主线程先发 {op:'init', cfg} → 回 {op:'ready'}；之后 {id, op, args} → {id, r}。
|
||||
旧实现是从页面 <script> 里刮求解器源码再拼 boot 字符串，那是单文件时代的产物：
|
||||
拆成 <script src> 之后 textContent 为空，会静默退回主线程同步求解。 */
|
||||
importScripts('../js/ik-solver.js');
|
||||
|
||||
let S = null;
|
||||
|
||||
onmessage = e => {
|
||||
const d = e.data || {};
|
||||
if (d.op === 'init') {
|
||||
try {
|
||||
S = ArmIK.make(d.cfg);
|
||||
postMessage({ op: 'ready' });
|
||||
} catch (err) {
|
||||
postMessage({ id: d.id, r: { __err: 'init 失败: ' + String(err && err.message || err) } });
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (!S) {
|
||||
postMessage({ id: d.id, r: { __err: 'worker 未初始化（没收到 init）' } });
|
||||
return;
|
||||
}
|
||||
let r;
|
||||
try {
|
||||
r = S[d.op].apply(S, d.args);
|
||||
} catch (err) {
|
||||
r = { __err: String(err && err.message || err) };
|
||||
}
|
||||
postMessage({ id: d.id, r: r });
|
||||
};
|
||||
Reference in New Issue
Block a user