refactor(viewer): app.js 按职责切成 8 个普通脚本(纯切片,零语义改动)

state / harness / camera / pick / ui / sheets / render / urlparams。
经典脚本的顶层 const/let 落在同一个全局词法作用域,所以切片本身不改变任何行为——
这一步先让"文件边界"与"模块语义"两件事分离:翻 ESM 时若出问题,责任清楚在
import/export,而不是切片切错了行。

切片踩到并修掉的:urlparams.js 被切掉了 IIFE 的收尾 })();(我按 len-2 收边界),
node --check 当场报 Unexpected end of input。

截图基线分级也在这一步收敛:工程图/装配向导视图带 feGaussianBlur 发光滤镜,
同一构建两轮就有 ±1 抖动(先前扫描那两轮碰巧逐字节相同,才漏进"稳定"清单,
于是随机假 FAIL)。把 8 张工程图/向导视图连同 3 张线束 x-ray、boss_p07、
p03_mount_loose 一起转像素容差(存参考像素,阈值 mean<=0.02、单像素<=32,
约实测 20x 余量),其余 92 张仍要求逐字节相同。

关卡:92 张逐字节一致 + 13 张在噪声阈内;数据哈希与 IK exact 段一致。
This commit is contained in:
cbb
2026-10-15 04:45:56 +08:00
parent 531a293688
commit f713355351
26 changed files with 1908 additions and 1816 deletions
+7
View File
@@ -37,3 +37,10 @@ docs/shots/harness_xray_internal.png
docs/shots/boss_p07.png
docs/shots/m3_sheet_exploded.png
docs/shots/p03_mount_loose.png
docs/shots/m2_sheet_joint.png
docs/shots/m1_sheet_front.png
docs/shots/m4_sheet_side.png
docs/shots/m5_guide_step1.png
docs/shots/m6_guide_step5.png
docs/shots/m7_sheet_blueprint.png
docs/shots/m8_sheet_dark.png
Binary file not shown.

Before

Width:  |  Height:  |  Size: 171 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 171 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 163 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 184 KiB

After

Width:  |  Height:  |  Size: 184 KiB

Before

Width:  |  Height:  |  Size: 175 KiB

After

Width:  |  Height:  |  Size: 175 KiB

Before

Width:  |  Height:  |  Size: 196 KiB

After

Width:  |  Height:  |  Size: 196 KiB

Before

Width:  |  Height:  |  Size: 200 KiB

After

Width:  |  Height:  |  Size: 200 KiB

Before

Width:  |  Height:  |  Size: 178 KiB

After

Width:  |  Height:  |  Size: 178 KiB

Before

Width:  |  Height:  |  Size: 159 KiB

After

Width:  |  Height:  |  Size: 159 KiB

+31 -3
View File
@@ -1,11 +1,11 @@
{
"note": "同一构建两轮实测:mean<=0.0019、单像素最大差 7、无像素差>8。阈值 mean<=0.02 / 单像素<=32 约留 20x 余量;超过即视为真实渲染回归。p03_mount_loose 是 ±1 量化噪声(曾两轮碰巧逐字节相同而漏进稳定清单)。",
"note": "工程图/装配向导视图带 feGaussianBlur 发光滤镜,同一构建两轮的实测抖动是 mean<=0.0019、单像素最大差 7、无像素差>8;boss_p07 / p03_mount_loose 与三张线束 x-ray 同属 ±1~7 的量化/透明排序噪声。阈值 mean<=0.02、单像素<=32 约留 20x 余量,超过即视为真实渲染回归。其余视图仍要求逐字节相同。",
"mean_max": 0.02,
"pixel_max": 32,
"views": {
"m3_sheet_exploded": {
"mean": 7e-05,
"mx": 1
"mean": 0.001,
"mx": 2
},
"boss_p07": {
"mean": 0.0,
@@ -26,6 +26,34 @@
"p03_mount_loose": {
"mean": 0.0,
"mx": 1
},
"m2_sheet_joint": {
"mean": 0.001,
"mx": 2
},
"m1_sheet_front": {
"mean": 0.001,
"mx": 2
},
"m4_sheet_side": {
"mean": 0.001,
"mx": 2
},
"m5_guide_step1": {
"mean": 0.001,
"mx": 2
},
"m6_guide_step5": {
"mean": 0.001,
"mx": 2
},
"m7_sheet_blueprint": {
"mean": 0.001,
"mx": 2
},
"m8_sheet_dark": {
"mean": 0.001,
"mx": 2
}
}
}
-7
View File
@@ -31,13 +31,6 @@ c55a40d4bc4b4e73a672326fa02d573c docs/shots/hollow_p04_top.png
f3b85ea576a6aa99a61953c4ff2a5ff4 docs/shots/hollow_p07_top.png
e169359e86a61f7ab80d4adea0231436 docs/shots/j3_前端压盖_全件.png
83325d3ca1b9e56fd2c70661052fd063 docs/shots/j3_前端压盖_装配.png
30ab6da268de109cd087b93b8b175cf9 docs/shots/m1_sheet_front.png
45050caba87c801ab0c29ac939e51e43 docs/shots/m2_sheet_joint.png
2b1950dda519fac21d5e71d4a9c1f990 docs/shots/m4_sheet_side.png
86098e0fada6f54d9ea3d285b3e0ed6e docs/shots/m5_guide_step1.png
8366cefeca8b935f9fef31bfd2454047 docs/shots/m6_guide_step5.png
40f4663eef6aa61f36e47e1fb1b1ab07 docs/shots/m7_sheet_blueprint.png
2702f107e6152f05a5016b916f38cb89 docs/shots/m8_sheet_dark.png
a6375fdce42c33395cad1586c9d6d8c5 docs/shots/m9_motion.png
c22cef65ca2a74b1332ecaba6b9a484a docs/shots/p03_light_iso.png
ebdeb9a180e95afd38f5a42d12743579 docs/shots/p03_light_join.png
+8 -1
View File
@@ -350,7 +350,14 @@
<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/state.js"></script>
<script src="js/harness.js"></script>
<script src="js/camera.js"></script>
<script src="js/pick.js"></script>
<script src="js/ui.js"></script>
<script src="js/sheets.js"></script>
<script src="js/render.js"></script>
<script src="js/urlparams.js"></script>
<script src="js/ik-solver.js"></script>
<script src="js/ik-glue.js"></script>
</body>
-1805
View File
File diff suppressed because it is too large Load Diff
+68
View File
@@ -0,0 +1,68 @@
/* 轨道相机与指针交互(旋转/平移/缩放/自适应取景) */
/* ---- camera orbit ---- */
let az = -0.9, po = 1.15, rd = 620, tx = 120, ty = 190, tz = -30;
// lookAt with the world up-axis degenerate-rolls the image when looking near-vertically,
// so top view pins the screen-up to -Z: model X runs right, depth runs down-screen
const UP_Y = new V3(0, 1, 0), UP_TOP = new V3(0, 0, -1);
let camUp = UP_Y.clone();
function fitTo(b) {
const c = [(b[0][0]+b[1][0])/2, (b[0][1]+b[1][1])/2, (b[0][2]+b[1][2])/2];
tx = c[0]; ty = c[1]; tz = c[2];
const s = Math.max(b[1][0]-b[0][0], b[1][1]-b[0][1], b[1][2]-b[0][2]);
rd = s * 1.78;
requestRender();
}
let BB = [[1e9,1e9,1e9],[-1e9,-1e9,-1e9]];
/* robust global bounds in the viewer frame (x, z, -y) */
(function(){
let lo=[1e9,1e9,1e9], hi=[-1e9,-1e9,-1e9];
for (const m of meshes) { if (m.userData.name.slice(0,4) === 'ENV_') continue; // 取景只按手臂本体,包络不入包围盒
const b=m.geometry.boundingBox;
const a=[b.min.x+m.base.x,b.min.y+m.base.y,b.min.z+m.base.z];
const c=[b.max.x+m.base.x,b.max.y+m.base.y,b.max.z+m.base.z];
for(let i=0;i<3;i++){lo[i]=Math.min(lo[i],a[i]);hi[i]=Math.max(hi[i],c[i]);} }
BB=[lo,hi];
})();
fitTo(BB);
function updCam() {
cam.up.copy(camUp);
cam.position.set(tx + rd*Math.sin(po)*Math.cos(az), ty + rd*Math.cos(po), tz + rd*Math.sin(po)*Math.sin(az));
cam.lookAt(tx, ty, tz);
}
let drag = null, panDist = 0;
cv.addEventListener('pointerdown', e => {
drag = {x:e.offsetX, y:e.offsetY, b:e.button};
panDist = 0;
cv.setPointerCapture(e.pointerId);
});
/* 悬浮拾取限流:射线要对 34 万三角面全量求交(实测 ≈0.5~1.5 ms/次),
旧版每个 pointermove 都算(rAF 合帧后仍≈显示器刷新率次数);
这里加 60 ms 时间配额 + 位置去重,指针静止时一次都不算,尾随仍会补最新位置,
tooltip 观感不变。点击 / 右键拾取不经过此函数,仍即时求交。 */
let hoverPending = false, lastHoverEv = null, hoverT = -1e9, hoverX = -1, hoverY = -1;
const HOVER_MS = 60;
function schedHover(e) {
if (e.clientX === hoverX && e.clientY === hoverY) return; // 没移动:结果不可能变
hoverX = e.clientX; hoverY = e.clientY; lastHoverEv = e;
if (hoverPending) return;
hoverPending = true;
setTimeout(() => {
hoverPending = false;
if (!lastHoverEv || drag) return;
hoverT = performance.now();
hover(lastHoverEv);
}, Math.max(0, HOVER_MS - (performance.now() - hoverT)));
}
cv.addEventListener('pointermove', e => {
if (!drag) { schedHover(e); return; }
const dx = e.offsetX - drag.x, dy = e.offsetY - drag.y;
panDist += Math.abs(dx) + Math.abs(dy);
drag = {x:e.offsetX, y:e.offsetY, b:drag.b};
if (drag.b === 0) { az -= dx*0.008; po = Math.min(3.04, Math.max(.05, po - dy*0.008)); }
else { const r = rd*0.0016; const f = new V3(Math.sin(az),0,Math.cos(az)), ri = new V3().crossVectors(new V3(0,1,0), f).normalize();
tx -= ri.x*dx*r + f.x*dy*r*0.0; tz -= ri.z*dx*r + f.z*dy*r*0.0; ty += dy*r; }
requestRender();
});
addEventListener('pointerup', () => drag = null);
cv.addEventListener('wheel', e => { e.preventDefault(); rd *= (1 + Math.sign(e.deltaY)*0.09); requestRender(); }, {passive:false});
+38
View File
@@ -0,0 +1,38 @@
/* 查看器数据:单文件时代这些是 build_viewer 字符串替换进来的 const,
现在用顶层 await 取。ESM 保证本模块在所有 import 它的模块之前完成,
所以下游文件可以直接读 DATA.parts,不需要 init() 编排。
路径相对文档基址(/webapp/index.html),因此 ../data 与 /docs 都能命中。 */
async function json(url) {
const r = await fetch(url);
if (!r.ok) throw new Error('取数据失败 ' + r.status + ' ' + url);
return r.json();
}
async function text(url) {
const r = await fetch(url);
if (!r.ok) throw new Error('取文件失败 ' + r.status + ' ' + url);
return r.text();
}
const [DATA, TRAVEL, COLLIDE, SCREWS, sheetSvg] = await Promise.all([
json('../data/mesh_arm.json'),
json('/docs/travel.json'),
json('/docs/collide.json'),
json('/docs/screws.json'),
// 工程图是 4 个真 SVG 文件(draw_sheet.py 产出),不再维护第二份 jsdata 副本
Promise.all(['front', 'joint', 'exploded', 'side']
.map(n => text('/docs/sheet_' + n + '.svg'))),
]);
if (!DATA || !Array.isArray(DATA.parts) || !DATA.parts.length) {
throw new Error('mesh_arm.json 里没有零件数据,先跑 python -m arm.build_model');
}
if (sheetSvg.length !== 4 || sheetSvg.some(s => s.indexOf('<svg') < 0)) {
throw new Error('工程图 SVG 不完整(应有 4 张且各含 <svg>)');
}
export { DATA, TRAVEL, COLLIDE, SCREWS };
export const SHEETS = sheetSvg;
export const TL = {};
for (const t of TRAVEL) TL[t.axis] = t;
+368
View File
@@ -0,0 +1,368 @@
/* 线束与走线指示系统(通道管、扎带、T 接、缓冲环、桥接曲线) */
/* ===================== 线束与走线指示系统 (Wire Harness System) ===================== */
const harnessGroup = new THREE.Group();
harnessGroup.name = 'HARNESS_ROOT';
scene.add(harnessGroup);
const matTrunk = new THREE.MeshStandardMaterial({
color: 0xf59e0b, roughness: 0.35, metalness: 0.25
});
const matDrop = new THREE.MeshStandardMaterial({
color: 0x10b981, roughness: 0.3, metalness: 0.2
});
const matTap = new THREE.MeshStandardMaterial({
color: 0x8b5cf6, roughness: 0.4, metalness: 0.3
});
const matTerm = new THREE.MeshStandardMaterial({
color: 0xef4444, roughness: 0.2, metalness: 0.5
});
const matClip = new THREE.MeshStandardMaterial({
color: 0x1e293b, roughness: 0.5, metalness: 0.2
});
const harnessMeshes = [];
function makeHarnTube(ptsCAD, r, mat, name, cn, parentGrp, segs = 18, radSegs = 8) {
const pts = ptsCAD.map(p => new THREE.Vector3(...VC(p)));
const curve = new THREE.CatmullRomCurve3(pts);
const geo = new THREE.TubeGeometry(curve, segs, r, radSegs, false);
const mesh = new THREE.Mesh(geo, mat);
mesh.userData = {
idx: 'H-CABLE', name: name || '4芯高柔拖链总线 (CAN+24V)',
cn: cn || '主干总线', vol: 8000, printed: false, harness: true
};
(parentGrp || harnessGroup).add(mesh);
harnessMeshes.push(mesh);
return mesh;
}
function makeHarnTap(pCAD, label, parentGrp) {
const geo = new THREE.BoxGeometry(10, 8, 14);
const mesh = new THREE.Mesh(geo, matTap);
mesh.position.set(...VC(pCAD));
mesh.userData = {
idx: 'H-TAP', name: label || 'T接分线小板',
cn: '微型T型总线分线节点', vol: 1100, printed: false, harness: true
};
const ledGeo = new THREE.SphereGeometry(1.2, 8, 8);
const ledMat = new THREE.MeshBasicMaterial({ color: 0x34d399 });
const led = new THREE.Mesh(ledGeo, ledMat);
led.position.set(0, 4.5, 0);
mesh.add(led);
(parentGrp || harnessGroup).add(mesh);
harnessMeshes.push(mesh);
return mesh;
}
function makeHarnClip(pCAD, parentGrp) {
const geo = new THREE.CylinderGeometry(3.0, 3.0, 4.0, 12, 1, true);
const mesh = new THREE.Mesh(geo, matClip);
mesh.position.set(...VC(pCAD));
(parentGrp || harnessGroup).add(mesh);
harnessMeshes.push(mesh);
return mesh;
}
function makeHarnTerm(pCAD, parentGrp) {
const geo = new THREE.CylinderGeometry(2.5, 2.5, 8.0, 12);
const mesh = new THREE.Mesh(geo, matTerm);
mesh.position.set(...VC(pCAD));
mesh.rotation.z = Math.PI / 2;
mesh.userData = {
idx: 'H-TERM', name: '120Ω 终端电阻 (总线末端阻抗匹配)',
cn: 'CAN总线终端匹配电阻', vol: 500, printed: false, harness: true
};
(parentGrp || harnessGroup).add(mesh);
harnessMeshes.push(mesh);
return mesh;
}
// 1. Root group harness (P01 立柱、P03 吊臂、M1 电机)
const hRoot = new THREE.Group();
hRoot.name = 'HARN_ROOT_SUB';
JG['root'].add(hRoot);
makeHarnTube([
[-115.0, 128.0, 35.0], [-115.0, 128.0, 250.0], [-115.0, 128.0, 470.0],
[-115.0, 128.0, 500.0]
], 2.0, matTrunk, 'P01立柱内穿线管主干 (24V+CAN,穿44x44内腔与P03减重窗)', '基座立柱主干', hRoot);
makeHarnTube([
[-115.0, 128.0, 500.0], [-115.0, 101.5, 520.0], [-105.0, 90.0, 545.0],
[-85.0, 89.8, 570.0], [-70.0, 87.4, 592.0], [-56.0, 85.6, 610.0],
[-20.0, 85.8, 610.0], [5.5, 86.1, 610.0]
], 1.8, matTrunk, 'P03吊臂侧向骨架主干 (扎带拱桥锁附,线心贴桥外露面)', 'P03吊臂实体主干', hRoot, 24, 8);
makeHarnTap([-115.0, 128.0, 505.0], 'T接小板① (M1供电分线节点)', hRoot);
// M1 外部大空间绕行通道:线束自基座 +Y 侧向外绕过 P03 法兰外廓(免打孔),在外部宽阔自由空间大半径弧形引入 M1 电机侧向缺口
makeHarnTube([
[-115.0, 128.0, 505.0], [-115.0, 155.0, 515.0], [-115.0, 172.0, 530.0],
[-95.0, 172.0, 565.0], [-75.0, 172.0, 595.0], [-55.0, 172.0, 610.15],
[-46.0, 166.0, 610.15], [-48.5, 158.0, 610.15], [-49.5, 154.5, 610.15]
], 1.5, matDrop, 'P03吊臂M1供电支干 (外侧大空间绕行引入)', 'M1 供电支干', hRoot, 16, 8);
makeHarnTap([-46.0, 166.0, 610.15], 'M1大空间侧向接插件 (20x20mm容纳位)', hRoot);
makeHarnClip([-115.0, 128.0, 300.0], hRoot);
makeHarnClip([-85.0, 89.8, 570.0], hRoot);
makeHarnClip([-56.0, 85.6, 610.0], hRoot);
makeHarnClip([5.5, 86.1, 610.0], hRoot);
const anchorA0 = new THREE.Object3D();
anchorA0.position.set(...VC([5.5, 86.1, 610.0]));
hRoot.add(anchorA0);
// 2. J1 group harness (P04 肩叉、M2 电机)
const hJ1 = new THREE.Group();
hJ1.name = 'HARN_J1';
JG['J1'].add(hJ1);
const anchorB1 = new THREE.Object3D();
anchorB1.position.set(...VC([20.0, 87.0, 615.0]));
hJ1.add(anchorB1);
makeHarnTube([
[20.0, 87.0, 615.0], [20.0, 87.0, 585.0], [20.0, 87.0, 560.0],
[20.0, 87.0, 535.0], [20.0, 87.0, 515.0], [5.0, 87.0, 500.0],
[-10.0, 87.0, 492.0], [-20.0, 88.0, 490.0], [-22.0, 96.0, 490.0],
[-20.0, 102.5, 490.0], [-17.5, 102.5, 485.0]
], 1.8, matTrunk, 'P04肩叉侧向外廓线卡走线 (扎带拱桥锁附)', 'P04 侧向走线', hJ1, 24, 8);
makeHarnTap([-17.5, 102.5, 490.0], 'T接小板② (J2/M2 分线节点)', hJ1);
// M2 侧向缺口出线 (CAD Notch: [-8.04, 102.50, 487.28],电机后端盖圆形PCBA侧向出线槽)
makeHarnTube([
[-8.04, 102.50, 487.28], [-13.0, 102.50, 488.5], [-17.5, 102.50, 490.0]
], 1.3, matDrop, 'M2 电机侧向缺口引出线 (2xCAN + 2x电源)', 'M2 出线分支', hJ1, 10, 6);
makeHarnClip([20.0, 87.0, 615.0], hJ1);
makeHarnClip([20.0, 87.0, 560.0], hJ1);
makeHarnClip([20.0, 87.0, 515.0], hJ1);
const anchorA1 = new THREE.Object3D();
anchorA1.position.set(...VC([-17.5, 102.5, 485.0]));
hJ1.add(anchorA1);
// 3. J2 group harness (P05 大臂旋转座、M3 电机)
const hJ2 = new THREE.Group();
hJ2.name = 'HARN_J2';
JG['J2'].add(hJ2);
const anchorB2 = new THREE.Object3D();
anchorB2.position.set(...VC([-17.5, 102.5, 445.0]));
hJ2.add(anchorB2);
makeHarnTube([
[-17.5, 102.5, 445.0], [-17.5, 102.5, 440.0]
], 1.8, matTrunk, 'P05大臂旋转座侧向外廓走线 (外侧平滑过渡,不穿电机)', 'P05 侧向走线', hJ2, 6, 6);
makeHarnTap([-17.5, 102.5, 440.0], 'T接小板③ (J3/M3 分线节点)', hJ2);
// M3 侧向缺口出线 (CAD Notch: [22.09, 100.30, 442.50],前向敞开侧圆形PCBA径向缺口)
makeHarnTube([
[22.09, 100.30, 442.50], [22.09, 93.0, 443.0], [5.0, 94.0, 444.0],
[-10.0, 98.0, 445.0], [-17.5, 102.50, 440.0]
], 1.3, matDrop, 'M3 电机侧向缺口引出线 (2xCAN + 2x电源)', 'M3 出线分支', hJ2, 12, 6);
makeHarnClip([-17.5, 102.5, 425.0], hJ2);
const anchorA2 = new THREE.Object3D();
anchorA2.position.set(...VC([-17.5, 102.5, 400.0]));
hJ2.add(anchorA2);
makeHarnTube([
[-17.5, 102.5, 440.0], [-17.5, 102.5, 425.0], [-17.5, 102.5, 400.0]
], 1.8, matTrunk, 'P05大臂旋转座侧向外壁引出段', 'P05引出', hJ2, 8, 6);
// 4. J3 group harness (P06 大臂骨架、M4 电机)
const hJ3 = new THREE.Group();
hJ3.name = 'HARN_J3';
JG['J3'].add(hJ3);
const anchorB3 = new THREE.Object3D();
anchorB3.position.set(...VC([-17.5, 102.5, 360.0]));
hJ3.add(anchorB3);
makeHarnTube([
[-17.5, 102.5, 360.0], [-20.7, 102.5, 345.0]
], 1.8, matTrunk, 'P06大臂外侧线槽走线', 'P06 侧向走线', hJ3, 8, 6);
makeHarnTap([-17.5, 102.5, 332.0], 'T接小板④ (J4/M4 肘部分线节点)', hJ3);
// M4 肘电机侧向缺口出线 (CAD Notch: [-8.04, 102.50, 329.28],电机后端盖圆形PCBA侧向出线槽)
makeHarnTube([
[-8.04, 102.50, 329.28], [-13.0, 102.50, 330.5], [-17.5, 102.50, 332.0]
], 1.3, matDrop, 'M4 肘电机侧向引出线 (2xCAN + 2x电源)', 'M4 出线分支', hJ3, 10, 6);
makeHarnClip([-20.7, 102.5, 345.0], hJ3);
makeHarnTube([
[-20.7, 102.5, 345.0], [-17.5, 102.5, 320.0], [-17.5, 102.5, 305.0]
], 1.8, matTrunk, 'P06大臂侧向外廊引出段', 'P06引出', hJ3, 8, 6);
const anchorA3 = new THREE.Object3D();
anchorA3.position.set(...VC([-17.5, 102.5, 305.0]));
hJ3.add(anchorA3);
// 5. J4 group harness (P07 小臂骨架、M5 电机)
const hJ4 = new THREE.Group();
hJ4.name = 'HARN_J4';
JG['J4'].add(hJ4);
const anchorB4 = new THREE.Object3D();
anchorB4.position.set(...VC([-17.5, 102.5, 255.0]));
hJ4.add(anchorB4);
makeHarnTube([
[-17.5, 102.5, 255.0], [-20.7, 102.5, 235.0]
], 1.8, matTrunk, 'P07小臂侧向外廓线槽走线 (外侧平滑过渡,不强行内穿)', 'P07 侧向走线', hJ4, 10, 6);
makeHarnTap([-17.5, 102.5, 222.0], 'T接小板⑤ (J5/M5 分线节点)', hJ4);
// M5 腕仰俯电机侧向缺口出线 (CAD Notch: [-8.04, 102.50, 219.28],电机后端盖圆形PCBA侧向出线槽)
makeHarnTube([
[-8.04, 102.50, 219.28], [-13.0, 102.50, 220.5], [-17.5, 102.50, 222.0]
], 1.3, matDrop, 'M5 电机侧向引出线 (2xCAN + 2x电源)', 'M5 出线分支', hJ4, 10, 6);
makeHarnClip([-20.7, 102.5, 235.0], hJ4);
makeHarnTube([
[-20.7, 102.5, 235.0], [-17.5, 102.5, 215.0], [-17.5, 102.5, 205.0]
], 1.8, matTrunk, 'P07小臂侧向外壁引出段', 'P07引出', hJ4, 8, 6);
const anchorA4 = new THREE.Object3D();
anchorA4.position.set(...VC([-17.5, 102.5, 205.0]));
hJ4.add(anchorA4);
// 6. J5 group harness (P08 腕偏转座、M6 电机)
const hJ5 = new THREE.Group();
hJ5.name = 'HARN_J5';
JG['J5'].add(hJ5);
const anchorB5 = new THREE.Object3D();
anchorB5.position.set(...VC([-17.5, 102.5, 175.0]));
hJ5.add(anchorB5);
makeHarnTube([
[-17.5, 102.5, 175.0], [-17.5, 102.5, 172.0]
], 1.8, matTrunk, 'P08腕偏转座侧向走线', 'P08 腕部外侧走线', hJ5, 6, 6);
makeHarnTap([-17.5, 102.5, 172.0], 'T接小板⑥ (J6/M6 终端分线节点)', hJ5);
// M6 腕自转电机侧向缺口出线 (CAD Notch: [22.09, 100.30, 173.50],前向敞开侧圆形PCBA径向缺口)
makeHarnTube([
[22.09, 100.30, 173.50], [22.09, 93.0, 174.0], [5.0, 94.0, 174.5],
[-10.0, 98.0, 175.0], [-17.5, 102.50, 172.0]
], 1.3, matDrop, 'M6 腕电机侧向引出线 (2xCAN + 2x电源)', 'M6 出线分支', hJ5, 12, 6);
makeHarnTerm([-17.5, 102.5, 168.0], hJ5);
// 7. Dynamic Flexible Bridges across J1~J5 (Service Loop / 弓形弹性缓冲回环)
const bridgeMeshes = [];
for (let i = 0; i < 5; i++) {
const geo = new THREE.BufferGeometry();
const mesh = new THREE.Mesh(geo, matTrunk);
mesh.userData = {
idx: 'H-BRIDGE-' + (i + 1),
name: 'J' + (i + 1) + ' 跨关节柔性服务回环 (Service Loop / 弓形缓冲弯曲段)',
cn: 'J' + (i + 1) + ' 柔性缓冲回环', vol: 2500, printed: false, harness: true
};
harnessGroup.add(mesh);
bridgeMeshes.push(mesh);
harnessMeshes.push(mesh);
}
const allHarnessContainers = [hRoot, hJ1, hJ2, hJ3, hJ4, hJ5, harnessGroup];
let harnessVisibleState = true;
function setHarnessVisible(v) {
harnessVisibleState = v;
allHarnessContainers.forEach(g => g.visible = v);
if (v) updateHarnessBridges();
requestRender();
}
window.setHarnessVisible = setHarnessVisible;
window.isHarnessVisible = () => harnessVisibleState;
const _pA = new THREE.Vector3(), _pB = new THREE.Vector3();
function updateHarnessBridges() {
if (!harnessVisibleState) return;
scene.updateMatrixWorld();
const pairs = [
{ a: anchorA0, b: anchorB1, type: 'roll1', slackL: 25, minH: 5, dir: new THREE.Vector3(0, 0.1, 0.99) }, // J1 roll
{ a: anchorA1, b: anchorB2, type: 'pitch2', slackL: 48, minH: 8, dir: new THREE.Vector3(-1, 0, 0) }, // J2 pitch
{ a: anchorA2, b: anchorB3, type: 'roll3', slackL: 46, minH: 7, dir: new THREE.Vector3(-0.7, 0, 0.7) }, // J3 roll
{ a: anchorA3, b: anchorB4, type: 'pitch4', slackL: 56, minH: 8, dir: new THREE.Vector3(-1, 0, 0) }, // J4 elbow pitch
{ a: anchorA4, b: anchorB5, type: 'pitch5', slackL: 36, minH: 6, dir: new THREE.Vector3(-1, 0, 0) }, // J5 wrist pitch
];
for (let i = 0; i < 5; i++) {
const pr = pairs[i];
pr.a.getWorldPosition(_pA);
pr.b.getWorldPosition(_pB);
const m = bridgeMeshes[i];
const dist = _pA.distanceTo(_pB);
const halfL = Math.max(dist * 0.5 + 2, pr.slackL * 0.5);
const halfD = dist * 0.5;
const h = Math.sqrt(Math.max(pr.minH * pr.minH, halfL * halfL - halfD * halfD));
const dirNorm = pr.dir.clone().normalize();
// 13 点正弦弹性拱形样条插值:端点切向连续,中间大半径圆滑过渡,彻底杜绝折角与多边形棱角
const pts = [];
const N = 12;
for (let k = 0; k <= N; k++) {
const u = k / N;
const base = new THREE.Vector3().lerpVectors(_pA, _pB, u);
const bulge = Math.sin(Math.PI * u) * h;
base.addScaledVector(dirNorm, bulge);
pts.push(base);
}
const curve = new THREE.CatmullRomCurve3(pts, false, 'centripetal', 0.5);
if (m.geometry) m.geometry.dispose();
m.geometry = new THREE.TubeGeometry(curve, 32, 1.8, 10, false);
}
}
window.updateHarnessBridges = updateHarnessBridges;
window.harnessGroup = harnessGroup;
window.harnessMeshes = harnessMeshes;
updateHarnessBridges();
const J6j = JO.find(j => j.id === 'J6');
// the jaws slide along the gripper motor's own local X, so that axis must come from J6
const JAWD = J6j ? new V3(...VC(J6j.xdir)).normalize() : new V3(0, 0, 1);
const PIN_R = 14.0;
const JMAX = TL.J6 ? PIN_R * (1 - Math.cos(TL.J6.hi * Math.PI / 180)) : 9.0;
const JAW_MAX = Math.min(9.0, Math.max(2.0, JMAX));
let jawMM = 0;
function updXform() {
for (const m of meshes) {
m.position.copy(m.base).multiplyScalar(expl);
if (m.userData.jaw) m.position.addScaledVector(JAWD, m.userData.jaw * jawMM);
}
if (window.setHarnessVisible) {
const bH = document.getElementById('bHarn');
const on = bH ? bH.classList.contains('on') : true;
setHarnessVisible(on && (expl < 0.05));
}
requestRender();
}
function setJaw(t) {
jawMM = Math.max(0, Math.min(JAW_MAX, t));
// the crank pins sit at radius 14 along the jaw axis as authored, so a rotation of phi
// puts the pin at x = 14*cos(phi) and each jaw rides out by exactly that much
const phi = Math.acos(Math.max(-1, Math.min(1, (PIN_R - jawMM) / PIN_R)));
ang.J6 = -phi * 180 / Math.PI;
applyJoint('J6');
updXform();
const e = document.getElementById('vJ6'); if (e) e.textContent = (2 * jawMM).toFixed(1) + ' mm';
}
function setExpl(k) {
expl = k;
updXform();
if (typeof updStat === 'function') updStat();
requestRender();
}
setExpl(0); // start assembled, not exploded
+126
View File
@@ -0,0 +1,126 @@
/* 拾取、悬停、隐藏与选中态 */
/* ---- picking & hiding ---- */
const ray = new THREE.Raycaster(); let sel = null, hov = null;
/* 拾取列表与 NDC 向量复用同一实例:旧版每次 pointermove 都 filter 出一个新数组 +
新建 Vector2(高频下纯垃圾)。可见性逐次重算,语义与 filter 完全一致
——three r159 的 Raycaster 不检查 object.visible,只能靠这里过滤。 */
const pickList = [], ndcPick = new THREE.Vector2();
function pick(e) {
const r = cv.getBoundingClientRect();
ndcPick.set(((e.clientX-r.left)/r.width)*2-1, -((e.clientY-r.top)/r.height)*2+1);
ray.setFromCamera(ndcPick, cam);
pickList.length = 0;
for (const m of meshes) if (m.visible) pickList.push(m);
if (window.isHarnessVisible && isHarnessVisible() && window.harnessMeshes) {
for (const m of harnessMeshes) if (m.visible) pickList.push(m);
}
const hit = ray.intersectObjects(pickList, false)[0];
return hit ? hit.object : null;
}
/* BOM 表高亮行只记一行:旧版每次点选/ESC 都要把整张表(13 行零件 + 10 行螺钉)
的 style.background 全刷一遍,纯属多余 DOM 写入。 */
let bomHlRow = null;
function bomHlClear() { if (bomHlRow) { bomHlRow.style.background = ''; bomHlRow = null; } }
function dimsStr(p) {
if (!p.dims) return '';
const f = d => String(Math.round(d * 10) / 10);
return '外形 ' + f(p.dims[0]) + ' × ' + f(p.dims[1]) + ' × ' + f(p.dims[2]) + ' mm(X·Y·Z)';
}
function hover(e) {
const o = pick(e); if (o === hov) return; hov = o;
const n = document.getElementById('note');
if (!o) { n.style.display = 'none'; return; }
const p = o.userData;
n.style.display = 'block';
if (p.harness) {
n.innerHTML = '<b>' + p.cn + '</b><br><small style="color:#fbbf24">' + p.name + '</small>';
} else {
n.innerHTML = '<b>#' + p.idx + ' ' + p.cn + '</b><br><small>' + p.name +
' · ' + (p.printed ? '3D打印件' : '电机/已有件') +
(dimsStr(p) ? '<br>' + dimsStr(p) : '') + '</small>';
}
}
function hidePart(m) {
if (!m) return;
const p = m.userData;
if (m === sel) {
m.material.emissive.setHex(0);
m.material.emissiveIntensity = 0;
sel = null;
}
m.visible = false;
if (m.chk) m.chk.checked = false;
const n = document.getElementById('note');
if (n) n.style.display = 'none';
const hud = document.getElementById('hud');
if (hud) {
hud.innerHTML = '已隐藏:<b>#' + p.idx + ' ' + p.cn + '</b> <span id="unhideBtn" style="color:var(--ac);cursor:pointer;text-decoration:underline;margin-left:6px">撤销</span> <small style="color:var(--dim)">(可在左侧零件树勾选或点击“全选”恢复)</small>';
const ub = document.getElementById('unhideBtn');
if (ub) ub.onclick = () => {
m.visible = true;
if (m.chk) m.chk.checked = true;
hud.textContent = '';
requestRender();
};
}
requestRender();
}
cv.addEventListener('contextmenu', e => {
e.preventDefault();
if (panDist > 6) return; // ignore drag panning
let target = sel;
if (!target) target = pick(e);
if (target) hidePart(target);
});
window.addEventListener('keydown', e => {
if (e.key === 'h' || e.key === 'H' || e.key === 'Delete') {
if (sel) hidePart(sel);
} else if (e.key === 'Escape') {
clearScrewHl();
if (sel) {
sel.material.emissive.setHex(0);
sel.material.emissiveIntensity = 0;
sel = null;
const hud = document.getElementById('hud');
if (hud) hud.textContent = '';
bomHlClear();
requestRender();
}
}
});
cv.addEventListener('click', e => {
const o = pick(e);
if (o === sel) {
if (sel) { sel.material.emissive.setHex(0); sel.material.emissiveIntensity = 0; sel = null; }
bomHlClear();
clearScrewHl();
const hud = document.getElementById('hud'); if (hud) { hud.textContent = ''; delete hud.dataset.scrHl; }
requestRender();
return;
}
if (sel && !sel.userData.screw && !sel.userData.harness) { sel.material.emissive.setHex(0); sel.material.emissiveIntensity = 0; }
sel = o;
if (sel && !sel.userData.screw && !sel.userData.harness) { sel.material.emissive.setHex(0x2f6bff); sel.material.emissiveIntensity = .55; }
const tb = document.querySelector('#bom tbody');
bomHlClear();
const hud = document.getElementById('hud');
hud.textContent = '';
delete hud.dataset.scrHl;
if (sel) {
const u = sel.userData;
if (u.screw) { highlightSpec(u.spec, false); requestRender(); return; } // 点中螺钉 -> 反查 BOM 行并定位
if (u.harness) {
hud.innerHTML = '<b>' + u.cn + '</b> · <span style="color:#f59e0b">' + u.name +
'</span> · 2×CAN通信 + 2×24V供电 · <span style="color:var(--ok)">4芯高柔拖链电缆/T型分接</span>';
requestRender();
return;
}
hud.innerHTML = '<b>#' + u.idx + ' ' + u.cn + '</b> · ' + (u.vol / 1000).toFixed(1) +
' cm3 · ' + (u.printed ? '打印件' : '电机/已有件') +
' <span style="margin-left:8px;color:var(--warn);font-size:11px">[右键单击或按H键隐藏此部件]</span>';
const tr = tb.querySelector('[data-idx="' + u.idx + '"]');
if (tr) { tr.style.background = '#22406b'; bomHlRow = tr; tr.scrollIntoView({block:'nearest'}); }
}
requestRender();
});
+48
View File
@@ -0,0 +1,48 @@
/* 尺寸自适应与按需渲染循环 */
/* ---- loop & on-demand rendering ---- */
let curW = 0, curH = 0;
function resize() {
if (cv.style.display === 'none') return;
const w = stage.clientWidth, h = stage.clientHeight;
if (!w || !h) return;
if (w !== curW || h !== curH) {
curW = w; curH = h;
rend.setSize(w, h, false);
cam.aspect = w / h;
cam.updateProjectionMatrix();
requestRender();
}
}
if (window.ResizeObserver) {
new ResizeObserver(() => resize()).observe(stage);
} else {
window.addEventListener('resize', resize);
}
document.getElementById('ttl').textContent = NMOT + ' 电机人形机器人手臂';
document.getElementById('ver').textContent = DATA.layout.ver + ' · 迭代 ' + DATA.layout.it +
' · 上臂' + DATA.layout.L1 + ' 前臂' + DATA.layout.L2 + ' mm';
function updStat() {
const el = document.getElementById('stat');
const tri = (typeof meshes !== 'undefined' && meshes) ? meshes.reduce((a, m) => a + (m.userData.triCount || 0), 0) : 0;
const nScr = (typeof meshes !== 'undefined' && meshes) ? meshes.filter(m => m.userData.screw).length : 0;
const nTot = (typeof meshes !== 'undefined' && meshes) ? meshes.length : 0;
if (el) el.textContent = '零件 ' + (nTot - nScr) + (nScr ? ' + 螺钉 ' + nScr : '') +
' · 三角面 ' + (tri/1000).toFixed(0) + 'k · ' + '爆炸 ' + Math.round(expl*100) + '%';
}
updStat();
/* 按需渲染:needRender 由 requestRender() 置位(所有交互与状态变化都已调用它;
旧版置位后全文件无读取点,等于恒以显示器刷新率空转满帧渲染)。
装配图页画布隐藏时【不清标志】,切回三维页由 tab 处理器 resize()+requestRender() 补渲染。
preserveDrawingBuffer 必须保持 true:不重绘时靠它保住最后一帧画面。 */
function loop() {
if (needRender && cv.style.display !== 'none') {
needRender = false;
resize();
updCam();
rend.render(scene, cam);
}
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
+715
View File
@@ -0,0 +1,715 @@
/* 二维工程图与分步装配向导 */
/* =========================================================================
交互式装配图与分步装配向导引擎 (Interactive Assembly Drawing Engine)
========================================================================= */
let sheetInited = false;
let curSheetIdx = 0; // 0: front, 1: joint, 2: exploded, 3: side, 'guide': assembly guide
let curSheetTheme = 'paper';
let sheetScale = 1.0;
let sheetPanX = 0, sheetPanY = 0;
let isSheetDragging = false;
let sheetDragStartX = 0, sheetDragStartY = 0;
let pinnedPartIdx = null;
let currentGuideStep = 0;
const SHEET_METAS = [
{ id: 'front', title: '01 总装图 - 正视', icon: '📐', desc: '沿 -X 投影;肢体在纸面内,显示左右交替堆叠。全部贴合面共用 Y=157 平面。' },
{ id: 'joint', title: '02 回转副 A-A 剖视', icon: '🔍', desc: '回转副局部放大 6 倍 — 实测数值基准:端面齿联轴器、对开抱箍与从动盘。' },
{ id: 'exploded', title: '03 轴测爆炸装配图', icon: '💥', desc: '轴测爆炸展开:逐级装配顺序,电机与端面齿组件沿轴线抽出。' },
{ id: 'side', title: '04 总装图 - 侧视', icon: '📐', desc: '沿 +Y 投影;俯仰轴垂直纸面。肩抬举偏置 92mm,肩吊臂侧板无干涉。' }
];
const ASSEMBLY_STEPS = [
{
step: 1,
title: '基座与三段立柱总装',
subtitle: '底脚锁紧 · 内部中空走线孔道贯通',
desc: '将 P02 Center/Front/Rear 底板组合锁紧,插入三段分体打印的 P01 立柱(A下段、B中段、C上段)。立柱段间通过止口插紧,内腔预留 Ø28mm 走线孔道,保证后续主干总线平顺穿入。',
parts: [
{ idx: 4, name: 'P02_Center 立柱锁紧底盘', role: '承重基板' },
{ idx: 5, name: 'P02_Front 前支承脚', role: '防前倾支撑' },
{ idx: 6, name: 'P02_Rear 后配重脚', role: '配重稳定' },
{ idx: 1, name: 'P01_A 立柱下段', role: '立柱下部' },
{ idx: 2, name: 'P01_B 立柱中段', role: '立柱中部' },
{ idx: 3, name: 'P01_C 立柱上段', role: '立柱顶部与J1过渡' }
],
screws: [
{ spec: 'M5 x 25 (S07)', qty: 4, role: '底盘主定位紧固' },
{ spec: 'M5 x 25 (S08)', qty: 4, role: '前后支承脚拼合' },
{ spec: 'M6 x 35 (S10)', qty: 6, role: '重载沉孔锚固' },
{ spec: 'M4 x 16 (S05)', qty: 8, role: '立柱三段段间自攻插合' }
],
tips: '安装前核对立柱内部走线通道无打印拉丝残留,螺丝按对角线分次拧紧。',
sheetRef: 0,
camera: { az: -0.6, po: 1.15, rd: 550, tx: 0, ty: 220, tz: 350 }
},
{
step: 2,
title: '肩部双自由度关节总成 (J1 & J2)',
subtitle: '肩外展抬举 + 肩俯仰正交布置',
desc: '在立柱顶端固定 P03 肩部关节安装架,装入 J1 伺服电机;通过端面齿联轴器连接 P04 正交肩肘;装入 J2 俯仰电机,形成沿 X 轴偏置 92mm 的正交双关节。',
parts: [
{ idx: 7, name: 'P03 肩部关节安装架', role: '肩部主承力座' },
{ idx: 14, name: 'M1_J1 电机模组', role: '肩抬举驱动' },
{ idx: 8, name: 'P04 正交肩肘', role: '90°正交转接' },
{ idx: 15, name: 'M2_J2 电机模组', role: '肩俯仰驱动' }
],
screws: [
{ spec: 'M2 x 10 (S01)', qty: 6, role: '电机输出端面固定' },
{ spec: 'M3 x 10 (S02)', qty: 8, role: '电机机座轴向夹紧' },
{ spec: 'M3 x 8 (S04)', qty: 4, role: '端面齿防脱抱箍锁紧' },
{ spec: 'M3 x 16 (S03)', qty: 4, role: 'P03 顶盖贯穿紧固' }
],
tips: '抱箍安装前务必确认两半端面齿盘脸已 100% 贴死,抱箍两半对开缝隙均匀。',
sheetRef: 1,
camera: { az: -0.8, po: 1.25, rd: 420, tx: -15, ty: 120, tz: 550 }
},
{
step: 3,
title: '大臂旋转座与主受力骨架 (J3 & P05/P06)',
subtitle: '大臂内旋自由度 · 桁架式轻量化骨架',
desc: '将 P05 大臂旋转座与 J2 输出端面贴合,装入 J3 大臂旋转电机;连接 P06 大臂骨架。P06 采用箱梁减重设计,侧壁开设有主总线走线过孔与扎带绑扎凸台。',
parts: [
{ idx: 9, name: 'P05 大臂旋转座', role: 'J3旋转基座' },
{ idx: 16, name: 'M3_J3 电机模组', role: '大臂自旋驱动' },
{ idx: 10, name: 'P06 大臂骨架', role: '大臂主连杆 (L1=158mm)' }
],
screws: [
{ spec: 'M2 x 10 (S01)', qty: 3, role: 'J3 输出法兰固定' },
{ spec: 'M3 x 10 (S02)', qty: 4, role: 'J3 外壳压紧' },
{ spec: 'M3 x 8 (S12)', qty: 4, role: 'P06 侧向加强壁锁紧' }
],
tips: 'J3 尾部排线由 P05 侧边专用豁口引出,避免受力压线或磨破外绝缘皮。',
sheetRef: 0,
camera: { az: -0.7, po: 1.2, rd: 380, tx: 20, ty: 100, tz: 410 }
},
{
step: 4,
title: '肘部俯仰关节与前臂驱动 (J4 & P07)',
subtitle: '肘关节俯仰驱动 · 偏置布置消除干涉',
desc: '在大臂末端装入 J4 肘部电机,连接 P07 小臂骨架。小臂骨架向上加高保护电机,侧面设置 U 型过关节线束缓冲槽,确保大角度折叠时总线不紧绷。',
parts: [
{ idx: 17, name: 'M4_J4 电机模组', role: '肘关节俯仰驱动' },
{ idx: 11, name: 'P07 小臂骨架', role: '前臂连杆 (L2=110mm)' }
],
screws: [
{ spec: 'M2 x 10 (S01)', qty: 3, role: 'J4 输出法兰' },
{ spec: 'M3 x 10 (S02)', qty: 4, role: 'J4 抱紧沉孔' },
{ spec: 'M3 x 8 (S12)', qty: 4, role: 'P07 顶部补强板锁紧' }
],
tips: '检查肘关节在全行程运动范围内线束无卡死或拉扯。',
sheetRef: 3,
camera: { az: -0.6, po: 1.2, rd: 320, tx: 20, ty: 65, tz: 330 }
},
{
step: 5,
title: '腕部双自由度与末端工具法兰 (J5, J6, P08, P09)',
subtitle: '腕部俯仰与自转 · 标准 ISO 工具接口',
desc: '在小臂末端装入 J5 腕部俯仰电机,连接 P08 腕部转接座;装入 J6 末端自旋电机,前端安装 P09 工具法兰。法兰带有标准 PCD 孔位,适配电动夹爪或快换工具。',
parts: [
{ idx: 18, name: 'M5_J5 电机模组', role: '腕俯仰驱动' },
{ idx: 12, name: 'P08 腕部转接座', role: '腕偏转过渡' },
{ idx: 19, name: 'M6_J6 电机模组', role: '末端自转驱动' },
{ idx: 13, name: 'P09 末端工具法兰', role: '标准夹爪安装面' }
],
screws: [
{ spec: 'M2 x 10 (S01)', qty: 6, role: 'J5/J6 输出法兰' },
{ spec: 'M3 x 10 (S02)', qty: 8, role: 'J5/J6 机座固定' },
{ spec: 'M4 x 16 (S06)', qty: 4, role: '末端工具安装紧固' }
],
tips: 'J6 法兰盘面与电机旋转中心精密对齐,端面螺钉交替预紧。',
sheetRef: 2,
camera: { az: -0.6, po: 1.25, rd: 240, tx: 20, ty: 80, tz: 200 }
},
{
step: 6,
title: '电气线束主干铺设与扎带固定',
subtitle: '4芯高柔拖链电缆 · 各关节U型缓冲弯 · 防拉扯扎带',
desc: '将 4 芯总线(2×CAN 通信 + 2×24V 供电)从立柱内腔穿入,经各关节 T 接小板向 J1~J6 分支。在各零件外壳的专用扎带固定槽使用阻燃尼龙扎带锁紧,过关节处保留 35mm U 型自由弯曲余量。',
parts: [
{ idx: 14, name: 'J1 电机总线分支', role: '首端分支' },
{ idx: 15, name: 'J2 电机总线分支', role: '肩部供电' },
{ idx: 16, name: 'J3 电机总线分支', role: '大臂供电' },
{ idx: 17, name: 'J4 电机总线分支', role: '肘部供电' },
{ idx: 18, name: 'J5 电机总线分支', role: '腕俯仰供电' },
{ idx: 19, name: 'J6 电机总线分支', role: '末端供电' }
],
screws: [
{ spec: '2.5×100mm 阻燃扎带', qty: 12, role: '线束固定锚点锁紧' }
],
tips: '慢速全行程转动各关节,目视确认线束弯曲半径均大于 15mm 且无边缘摩擦。',
sheetRef: 0,
camera: { az: -0.7, po: 1.15, rd: 580, tx: 0, ty: 180, tz: 380 }
}
];
function applySheetTransform() {
const canvas = document.getElementById('sheetCanvas');
if (canvas) {
canvas.style.transform = `translate(${sheetPanX}px, ${sheetPanY}px) scale(${sheetScale})`;
}
const badge = document.getElementById('sheetZoomBadge');
if (badge) {
badge.textContent = Math.round(sheetScale * 100) + '%';
}
}
function fitSheetToScreen() {
const svg = document.querySelector('#sheetSvgWrapper svg');
if (!svg) return;
const vb = svg.viewBox.baseVal;
const W = (vb && vb.width) ? vb.width : (svg.clientWidth || 1200);
const H = (vb && vb.height) ? vb.height : (svg.clientHeight || 800);
const vp = document.getElementById('sheetViewport');
if (!vp) return;
const vw = vp.clientWidth, vh = vp.clientHeight;
if (!vw || !vh) return;
const pad = 36;
sheetScale = Math.min((vw - pad * 2) / W, (vh - pad * 2) / H);
sheetScale = Math.max(0.15, Math.min(sheetScale, 3.0));
sheetPanX = (vw - W * sheetScale) / 2;
sheetPanY = (vh - H * sheetScale) / 2;
applySheetTransform();
}
function renderSheet(idx) {
curSheetIdx = idx;
const isGuide = idx === 'guide';
const vp = document.getElementById('sheetViewport');
const gv = document.getElementById('sheetGuideView');
// Update tabs
document.querySelectorAll('#sheetTabs .sheet-tab').forEach(b => {
b.classList.toggle('on', b.dataset.sheet === String(idx));
});
if (isGuide) {
if (vp) vp.style.display = 'none';
if (gv) gv.style.display = 'flex';
renderGuideStep(currentGuideStep);
return;
}
if (gv) gv.style.display = 'none';
if (vp) vp.style.display = 'block';
const wrapper = document.getElementById('sheetSvgWrapper');
if (wrapper && typeof SHEETS !== 'undefined' && SHEETS[idx]) {
wrapper.innerHTML = SHEETS[idx];
const svg = wrapper.querySelector('svg');
if (svg) {
const vb = svg.viewBox && svg.viewBox.baseVal;
const w = (vb && vb.width) || 1200;
const h = (vb && vb.height) || 800;
svg.setAttribute('width', w);
svg.setAttribute('height', h);
svg.style.width = w + 'px';
svg.style.height = h + 'px';
}
}
// Update sheet title & desc
const meta = SHEET_METAS[idx] || {};
const tEl = document.getElementById('sheetInfoTitle');
const dEl = document.getElementById('sheetInfoDesc');
if (tEl) tEl.innerHTML = `<b>${meta.title || ''}</b>`;
if (dEl) dEl.textContent = meta.desc || '';
// Apply layer toggles
applySheetLayers();
// Reset highlight & tooltip
pinnedPartIdx = null;
clearSheetPartHighlight();
// Fit to screen
setTimeout(fitSheetToScreen, 20);
}
function applySheetLayers() {
const svg = document.querySelector('#sheetSvgWrapper svg');
if (!svg) return;
const bBal = document.getElementById('chkLyrBalloons');
const bDim = document.getElementById('chkLyrDims');
const bAxe = document.getElementById('chkLyrAxes');
const bLeg = document.getElementById('chkLyrLegend');
const showBal = bBal ? bBal.checked : true;
const showDim = bDim ? bDim.checked : true;
const showAxe = bAxe ? bAxe.checked : true;
const showLeg = bLeg ? bLeg.checked : true;
svg.querySelectorAll('.sheet-balloons-group, .sheet-balloon, .sheet-leader').forEach(el => {
el.style.display = showBal ? '' : 'none';
});
svg.querySelectorAll('.sheet-dims-group, .sheet-dim, .sheet-dim-line, .sheet-dim-ext, .sheet-dim-text').forEach(el => {
el.style.display = showDim ? '' : 'none';
});
svg.querySelectorAll('.sheet-axes-group, .sheet-axis, .sheet-axis-label').forEach(el => {
el.style.display = showAxe ? '' : 'none';
});
svg.querySelectorAll('.sheet-legend-box, .sheet-legend-row').forEach(el => {
el.style.display = showLeg ? '' : 'none';
});
}
function highlightSheetPart(idx, mouseEvent) {
const svg = document.querySelector('#sheetSvgWrapper svg');
if (!svg) return;
// Remove previous hover classes
svg.querySelectorAll('.is-hovered').forEach(el => el.classList.remove('is-hovered'));
// Highlight all elements with data-idx=idx
const targets = svg.querySelectorAll(`[data-idx="${idx}"]`);
targets.forEach(el => el.classList.add('is-hovered'));
// Highlight row in Left Tree / BOM
highlightLeftTreeRow(idx);
// Show Tooltip HUD
showSheetTooltip(idx, mouseEvent);
}
function clearSheetPartHighlight() {
const svg = document.querySelector('#sheetSvgWrapper svg');
if (svg) {
svg.querySelectorAll('.is-hovered').forEach(el => el.classList.remove('is-hovered'));
}
const tt = document.getElementById('sheetTooltip');
if (tt && !pinnedPartIdx) tt.style.display = 'none';
clearLeftTreeRow();
}
function showSheetTooltip(idx, e) {
const tt = document.getElementById('sheetTooltip');
if (!tt) return;
const part = DATA.parts.find(p => p.idx === idx);
if (!part) {
tt.style.display = 'none';
return;
}
const isPrinted = part.printed;
const volCm3 = (part.vol / 1000).toFixed(1);
const wtG = Math.round((part.vol / 1000) * 1.25);
const dimsStr = part.dims ? `${Math.round(part.dims[0])} × ${Math.round(part.dims[1])} × ${Math.round(part.dims[2])} mm` : '-';
const screwText = part.name.startsWith('P') ? 'M2/M3 内六角紧固螺钉' : '输出法兰配合';
tt.innerHTML = `
<div class="st-title">
<span>#${idx} ${part.cn || part.name}</span>
<span class="st-tag ${isPrinted ? 'pr' : 'ex'}">${isPrinted ? 'PLA 打印件' : '外购模组'}</span>
</div>
<div class="st-row"><span>设计编号:</span><span>${part.name.split('_')[0] || part.name}</span></div>
<div class="st-row"><span>包络三围:</span><span>${dimsStr}</span></div>
<div class="st-row"><span>净重估算:</span><span>${wtG} g (${volCm3} cm³)</span></div>
<div class="st-row"><span>连接关系:</span><span>${screwText}</span></div>
<button class="st-btn" onclick="jumpToPart3D(${idx})">🧊 在 3D 模型中定位高亮</button>
`;
tt.style.display = 'block';
// Position tooltip
const vp = document.getElementById('sheetViewport');
if (e && vp) {
const vr = vp.getBoundingClientRect();
let x = e.clientX - vr.left + 16;
let y = e.clientY - vr.top + 16;
if (x + 310 > vr.width) x = e.clientX - vr.left - 320;
if (y + 180 > vr.height) y = e.clientY - vr.top - 180;
tt.style.left = Math.max(10, x) + 'px';
tt.style.top = Math.max(10, y) + 'px';
}
}
function highlightLeftTreeRow(idx) {
document.querySelectorAll('#tree .row').forEach(r => {
if (r.dataset && r.dataset.idx === String(idx)) {
r.style.background = '#1e3a66';
r.style.borderRadius = '3px';
} else {
r.style.background = '';
}
});
}
function clearLeftTreeRow() {
document.querySelectorAll('#tree .row').forEach(r => r.style.background = '');
}
function jumpToPart3D(idx) {
const tabModel = document.querySelector('.tab[data-view="model"]');
if (tabModel) tabModel.click();
setTimeout(() => {
const m = meshes.find(x => x.userData && x.userData.idx === idx);
if (!m) return;
if (sel && !sel.userData.screw && !sel.userData.harness) {
sel.material.emissive.setHex(0);
sel.material.emissiveIntensity = 0;
}
sel = m;
m.visible = true;
if (m.chk) m.chk.checked = true;
m.material.emissive.setHex(0x2f6bff);
m.material.emissiveIntensity = 0.8;
const box = new THREE.Box3().setFromObject(m);
const center = new THREE.Vector3();
box.getCenter(center);
tx = center.x; ty = center.y; tz = center.z;
rd = Math.max(220, box.getSize(new THREE.Vector3()).length() * 2.2);
requestRender();
const hud = document.getElementById('hud');
if (hud) {
hud.innerHTML = `<b>已在3D中定位: #${idx} ${m.userData.cn || ''}</b> · ` +
(m.userData.printed ? 'PLA打印件' : '外购电机/标准件') +
` <span class="hudlink" onclick="document.querySelector('.tab[data-view=sheet]').click()">[返回装配图]</span>`;
}
}, 60);
}
function renderGuideStep(stepIdx) {
currentGuideStep = Math.max(0, Math.min(stepIdx, ASSEMBLY_STEPS.length - 1));
const step = ASSEMBLY_STEPS[currentGuideStep];
if (!step) return;
// Render step chips
const bar = document.getElementById('guideStepsBar');
if (bar) {
bar.innerHTML = ASSEMBLY_STEPS.map((s, i) => `
<div class="guide-step-chip ${i === currentGuideStep ? 'active' : ''}" onclick="renderGuideStep(${i})">
<b>步骤 ${s.step}</b> ${s.title.split(' ')[0]}
</div>
`).join('');
}
// Render left panel
const pLeft = document.getElementById('guidePanelLeft');
if (pLeft) {
pLeft.innerHTML = `
<div style="font-size:11px;color:var(--warn);font-weight:bold;letter-spacing:.6px">工序 ${step.step} / ${ASSEMBLY_STEPS.length}</div>
<div style="font-size:15px;font-weight:bold;color:#fff">${step.title}</div>
<div style="font-size:12px;color:var(--dim);margin-top:-6px">${step.subtitle}</div>
<div class="guide-card">
<div class="guide-card-title">📖 装配任务说明</div>
<div style="font-size:12px;line-height:1.6;color:var(--tx)">${step.desc}</div>
</div>
<div class="guide-card">
<div class="guide-card-title">📦 本工序构件 (${step.parts.length} 件)</div>
<div class="guide-part-list">
${step.parts.map(p => `
<div class="guide-part-badge" onclick="jumpToPart3D(${p.idx})">
<b>#${p.idx}</b> ${p.name} <span style="color:var(--dim);font-size:10px">(${p.role})</span>
</div>
`).join('')}
</div>
</div>
<div class="guide-card">
<div class="guide-card-title">🔩 紧固件与螺钉清单</div>
<div style="display:flex;flex-direction:column;gap:5px;font-size:11.5px">
${step.screws.map(s => `
<div style="display:flex;justify-content:space-between;color:var(--tx)">
<span><b>${s.spec}</b> × ${s.qty}</span>
<span style="color:var(--dim)">${s.role}</span>
</div>
`).join('')}
</div>
</div>
<div class="guide-card" style="border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.06)">
<div class="guide-card-title">⚠️ 工艺公差与装配要点</div>
<div style="font-size:11.5px;color:#fef3c7;line-height:1.5">${step.tips}</div>
</div>
<div class="guide-actions">
<button class="guide-btn guide-btn-nav" ${currentGuideStep === 0 ? 'disabled style="opacity:.4"' : ''} onclick="renderGuideStep(${currentGuideStep - 1})">⬅ 上一步</button>
<button class="guide-btn guide-btn-nav" ${currentGuideStep === ASSEMBLY_STEPS.length - 1 ? 'disabled style="opacity:.4"' : ''} onclick="renderGuideStep(${currentGuideStep + 1})">下一步 ➡</button>
<button class="guide-btn guide-btn-3d" onclick="showAssemblyStepIn3D(${currentGuideStep})">🧊 3D模拟装配</button>
</div>
`;
}
// Render right preview: show relevant sheet for this step
const cw = document.getElementById('guideCanvasWrapper');
if (cw && typeof SHEETS !== 'undefined') {
cw.innerHTML = SHEETS[step.sheetRef];
const svg = cw.querySelector('svg');
if (svg) {
svg.style.maxWidth = '92%';
svg.style.maxHeight = '92%';
svg.style.width = 'auto';
svg.style.height = 'auto';
svg.style.boxShadow = '0 10px 40px rgba(0,0,0,.6)';
svg.style.borderRadius = '6px';
// Highlight step parts in SVG
const stepPartIdxs = step.parts.map(p => p.idx);
svg.querySelectorAll('.sheet-part-path').forEach(p => {
const idx = parseInt(p.dataset.idx);
if (stepPartIdxs.includes(idx)) {
p.style.stroke = '#f59e0b';
p.style.strokeWidth = '2.8px';
p.style.filter = 'drop-shadow(0 0 6px #f59e0b)';
} else {
p.style.opacity = '0.35';
}
});
svg.querySelectorAll('.sheet-balloon').forEach(b => {
const idx = parseInt(b.dataset.idx);
if (stepPartIdxs.includes(idx)) {
const c = b.querySelector('.balloon-circle');
if (c) { c.style.fill = '#f59e0b'; c.style.stroke = '#ffffff'; }
const t = b.querySelector('.balloon-text');
if (t) t.style.fill = '#ffffff';
} else {
b.style.opacity = '0.3';
}
});
}
}
}
function showAssemblyStepIn3D(stepIdx) {
const step = ASSEMBLY_STEPS[stepIdx];
if (!step) return;
const tabModel = document.querySelector('.tab[data-view="model"]');
if (tabModel) tabModel.click();
setTimeout(() => {
if (step.camera) {
az = step.camera.az; po = step.camera.po; rd = step.camera.rd;
tx = step.camera.tx; ty = step.camera.ty; tz = step.camera.tz;
}
const stepPartIdxs = step.parts.map(p => p.idx);
meshes.forEach(m => {
if (m.userData && stepPartIdxs.includes(m.userData.idx)) {
m.visible = true;
if (m.chk) m.chk.checked = true;
m.material.emissive.setHex(0xd97706);
m.material.emissiveIntensity = 0.65;
} else if (m.userData && !m.userData.screw && !m.userData.harness) {
m.material.emissive.setHex(0);
m.material.emissiveIntensity = 0;
}
});
requestRender();
const hud = document.getElementById('hud');
if (hud) {
hud.innerHTML = `<b>装配向导第 ${step.step} 步: ${step.title}</b> · 构件高亮呈现 ` +
`<span class="hudlink" onclick="document.querySelector('.tab[data-view=sheet]').click()">[返回装配向导]</span>`;
}
}, 60);
}
function initSheetViewer() {
if (sheetInited) return;
sheetInited = true;
const vp = document.getElementById('sheetViewport');
const canvas = document.getElementById('sheetCanvas');
// Sheet Tabs Click
document.querySelectorAll('#sheetTabs .sheet-tab').forEach(b => {
b.onclick = () => {
const idx = b.dataset.sheet === 'guide' ? 'guide' : parseInt(b.dataset.sheet);
renderSheet(idx);
};
});
// Exit Guide button
const btnExit = document.getElementById('btnExitGuide');
if (btnExit) btnExit.onclick = () => renderSheet(0);
// Theme Switcher Click
document.querySelectorAll('#sheetToolbar [data-theme]').forEach(b => {
b.onclick = () => {
document.querySelectorAll('#sheetToolbar [data-theme]').forEach(x => x.classList.remove('on'));
b.classList.add('on');
curSheetTheme = b.dataset.theme;
const sh = document.getElementById('sheet');
if (sh) sh.className = 'theme-' + curSheetTheme;
};
});
// Layer Checkboxes
['chkLyrBalloons', 'chkLyrDims', 'chkLyrAxes', 'chkLyrLegend'].forEach(id => {
const el = document.getElementById(id);
if (el) el.onchange = () => applySheetLayers();
});
// 3D Bridge Button
const btn3D = document.getElementById('btnSheetTo3D');
if (btn3D) {
btn3D.onclick = () => {
if (pinnedPartIdx) jumpToPart3D(pinnedPartIdx);
else {
const tabModel = document.querySelector('.tab[data-view="model"]');
if (tabModel) tabModel.click();
}
};
}
// Float Bar Buttons
const sfbIn = document.getElementById('sfbIn');
if (sfbIn) sfbIn.onclick = () => {
sheetScale = Math.min(6.0, sheetScale * 1.25);
applySheetTransform();
};
const sfbOut = document.getElementById('sfbOut');
if (sfbOut) sfbOut.onclick = () => {
sheetScale = Math.max(0.15, sheetScale / 1.25);
applySheetTransform();
};
const sfbFit = document.getElementById('sfbFit');
if (sfbFit) sfbFit.onclick = () => fitSheetToScreen();
const sfb100 = document.getElementById('sfb100');
if (sfb100) sfb100.onclick = () => {
sheetScale = 1.0;
const vp = document.getElementById('sheetViewport');
const svg = document.querySelector('#sheetSvgWrapper svg');
if (vp && svg) {
sheetPanX = (vp.clientWidth - (svg.viewBox.baseVal.width || 1200)) / 2;
sheetPanY = (vp.clientHeight - (svg.viewBox.baseVal.height || 800)) / 2;
}
applySheetTransform();
};
const sfbReset = document.getElementById('sfbReset');
if (sfbReset) sfbReset.onclick = () => fitSheetToScreen();
const sfbFull = document.getElementById('sfbFull');
if (sfbFull) {
sfbFull.onclick = () => {
const sh = document.getElementById('sheet');
if (!document.fullscreenElement) {
if (sh && sh.requestFullscreen) sh.requestFullscreen();
} else {
if (document.exitFullscreen) document.exitFullscreen();
}
};
}
const badge = document.getElementById('sheetZoomBadge');
if (badge) badge.onclick = () => fitSheetToScreen();
// Viewport Wheel Zoom
if (vp) {
vp.addEventListener('wheel', e => {
e.preventDefault();
const rect = vp.getBoundingClientRect();
const mx = e.clientX - rect.left;
const my = e.clientY - rect.top;
const factor = e.deltaY < 0 ? 1.15 : 0.87;
const newScale = Math.max(0.15, Math.min(6.0, sheetScale * factor));
sheetPanX = mx - (mx - sheetPanX) * (newScale / sheetScale);
sheetPanY = my - (my - sheetPanY) * (newScale / sheetScale);
sheetScale = newScale;
applySheetTransform();
}, { passive: false });
// Drag Pan
vp.addEventListener('mousedown', e => {
if (e.button !== 0 && e.button !== 1) return;
isSheetDragging = true;
vp.classList.add('is-dragging');
sheetDragStartX = e.clientX - sheetPanX;
sheetDragStartY = e.clientY - sheetPanY;
});
window.addEventListener('mousemove', e => {
if (!isSheetDragging) return;
sheetPanX = e.clientX - sheetDragStartX;
sheetPanY = e.clientY - sheetDragStartY;
applySheetTransform();
});
window.addEventListener('mouseup', () => {
if (isSheetDragging) {
isSheetDragging = false;
vp.classList.remove('is-dragging');
}
});
vp.addEventListener('dblclick', e => {
if (e.target.closest('.sheet-part-path') || e.target.closest('.sheet-balloon')) return;
fitSheetToScreen();
});
}
// Interactive Hover & Click on Canvas
if (canvas) {
canvas.addEventListener('mouseover', e => {
const hit = e.target.closest('[data-idx]');
if (!hit) return;
const idx = parseInt(hit.dataset.idx);
if (!isNaN(idx)) highlightSheetPart(idx, e);
});
canvas.addEventListener('mouseout', e => {
const hit = e.target.closest('[data-idx]');
if (!hit) return;
if (!pinnedPartIdx) clearSheetPartHighlight();
});
canvas.addEventListener('click', e => {
const hit = e.target.closest('[data-idx]');
if (hit) {
const idx = parseInt(hit.dataset.idx);
if (!isNaN(idx)) {
if (pinnedPartIdx === idx) {
pinnedPartIdx = null;
clearSheetPartHighlight();
} else {
pinnedPartIdx = idx;
highlightSheetPart(idx, e);
const tt = document.getElementById('sheetTooltip');
if (tt) tt.classList.add('pinned');
}
}
} else {
pinnedPartIdx = null;
clearSheetPartHighlight();
const tt = document.getElementById('sheetTooltip');
if (tt) { tt.classList.remove('pinned'); tt.style.display = 'none'; }
}
});
}
// Initial render of first sheet
renderSheet(0);
}
function openSheetView() {
initSheetViewer();
const footM = document.getElementById('footModel');
const footS = document.getElementById('footSheet');
if (footM) footM.style.display = 'none';
if (footS) footS.style.display = 'inline';
setTimeout(fitSheetToScreen, 40);
}
document.querySelectorAll('.tab[data-view]').forEach(b => b.onclick = () => {
document.querySelectorAll('.tab[data-view]').forEach(x => x.classList.remove('on'));
b.classList.add('on');
const s = b.dataset.view === 'sheet';
document.body.classList.toggle('sheet-mode', s);
sheet.style.display = s ? 'flex' : 'none';
cv.style.display = s ? 'none' : 'block';
const footM = document.getElementById('footModel');
const footS = document.getElementById('footSheet');
if (s) {
if (footM) footM.style.display = 'none';
if (footS) footS.style.display = 'inline';
openSheetView();
} else {
if (footM) footM.style.display = 'inline';
if (footS) footS.style.display = 'none';
resize();
requestRender();
}
});
+115
View File
@@ -0,0 +1,115 @@
/* 共享状态根:渲染器/场景/相机/灯光/栅格 + 关节链 + 网格构建 + 按需渲染标志 */
const TL = {}; for (const t of TRAVEL) TL[t.axis] = t;
const V3 = THREE.Vector3;
const VC = p => [p[0], p[2], -p[1]]; // CAD (x,y,z) -> viewer (x,z,-y); must precede use
const cv = document.getElementById('cv');
const rend = new THREE.WebGLRenderer({canvas:cv, antialias:true, preserveDrawingBuffer:true});
rend.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.5));
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0d0f13);
const cam = new THREE.PerspectiveCamera(38, 1, 1, 6000);
scene.add(new THREE.HemisphereLight(0xcfe4ff, 0x22262e, 1.15));
const key = new THREE.DirectionalLight(0xffffff, 1.5); key.position.set(420, 620, 520); scene.add(key);
const key2 = new THREE.DirectionalLight(0x9dc4ff, .7); key2.position.set(-520, 300, -420); scene.add(key2);
const grid = new THREE.GridHelper(600, 30, 0x2b323e, 0x1b2028); grid.position.y = -0.5; scene.add(grid);
let needRender = true;
function requestRender() { needRender = true; }
/* ---- kinematic groups: nested pivot matrices, serial chain ---- */
const ROOT = new THREE.Object3D(); scene.add(ROOT);
const JG = {root: ROOT};
const JO = DATA.joints;
const parentOf = {J1:'root', J2:'J1', J3:'J2', J4:'J3', J5:'J4', J6:'J5'};
const ang = {J1:0, J2:0, J3:0, J4:0, J5:0, J6:0};
for (const j of JO) {
const g = new THREE.Object3D(); g.matrixAutoUpdate = false;
JG[j.id] = g; JG[parentOf[j.id]].add(g);
}
/* 轴心 P / 轴向 D 只与 CAD 参数有关:预计算一次;矩阵合成改用 3 个共享实例。
旧版每次调用新建 2 个 Vector3 + 3 个 Matrix4(一次关节写入 = 6 次调用 = 30 个临时对象),
动画与实时追踪高频触发时纯属垃圾。数学与原式逐位相同:T(P)·R(D,θ)·T(−P)。 */
const JP = {}, JD = {};
for (const j of JO) { JP[j.id] = new V3(...VC(j.rear)); JD[j.id] = new V3(...VC(j.d)).normalize(); }
const _jmT = new THREE.Matrix4(), _jmR = new THREE.Matrix4(), _jmTi = new THREE.Matrix4();
function applyJoint(id) {
// geometry vertices were built in the viewer frame (x, z, -y), so the pivot point and the
// axis must go through the same swap - using raw CAD coords rotates about the wrong line
const P = JP[id], D = JD[id]; if (!P) return;
const a = (ang[id] || 0) * Math.PI / 180;
const m = _jmT.makeTranslation(P.x, P.y, P.z)
.multiply(_jmR.makeRotationAxis(D, a))
.multiply(_jmTi.makeTranslation(-P.x, -P.y, -P.z));
JG[id].matrix.copy(m);
JG[id].matrixWorldNeedsUpdate = true;
if (window.updateHarnessBridges && window.isHarnessVisible && window.isHarnessVisible()) {
updateHarnessBridges();
}
requestRender();
}
/* ---- meshes ---- */
const meshes = [], byName = {};
let expl = 0;
for (const p of DATA.parts) {
const geo = new THREE.BufferGeometry();
const pos = new Float32Array(p.v.length * 3);
for (let i = 0; i < p.v.length; i++) { pos[i*3] = p.v[i][0]; pos[i*3+1] = p.v[i][2]; pos[i*3+2] = -p.v[i][1]; }
p.triCount = p.t ? p.t.length : 0;
p.vertCount = p.v.length;
/* 外形三围:模型坐标系 X×Y×Z 包围盒(装配零位、打印朝向 Z=高),悬停面板显示用 */
{ let x0=1e9,y0=1e9,z0=1e9,x1=-1e9,y1=-1e9,z1=-1e9;
for (let i = 0; i < p.v.length; i++) { const a = p.v[i];
if (a[0]<x0)x0=a[0]; if (a[0]>x1)x1=a[0];
if (a[1]<y0)y0=a[1]; if (a[1]>y1)y1=a[1];
if (a[2]<z0)z0=a[2]; if (a[2]>z1)z1=a[2]; }
p.dims = [x1-x0, y1-y0, z1-z0]; }
const isEnv = p.name.slice(0, 4) === 'ENV_'; // 可达包络:运动学边界,不随关节动
/* 索引按顶点数降位:单件 ≤65535 顶点时 Uint16 合法(92 件实测最大 47483),
索引内存与上传带宽减半;超大件保留 Uint32 兜底。 */
const IDX16 = p.v.length <= 65535;
if (p.kind === 'line') { // 经纬线:LineSegments,无三角面
const sIdx = IDX16 ? new Uint16Array(p.s) : new Uint32Array(p.s);
geo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
geo.setIndex(new THREE.BufferAttribute(sIdx, 1));
geo.computeBoundingSphere(); geo.computeBoundingBox();
const lm = new THREE.LineBasicMaterial({color: p.color, transparent: true, opacity: 0.8});
const ls = new THREE.LineSegments(geo, lm);
ls.userData = p;
ls.position.set(p.ex[0], p.ex[2], -p.ex[1]);
ls.base = ls.position.clone();
ls.visible = !isEnv; // 包络默认隐藏,走开关显示
JG[p.grp || 'root'].add(ls);
meshes.push(ls); byName[p.name] = ls;
delete p.v; delete p.s;
continue;
}
const idx = IDX16 ? new Uint16Array(p.t.length * 3) : new Uint32Array(p.t.length * 3);
// the vertex map (x,y,z)->(x,z,-y) has determinant +1, so triangle winding must be kept
// as-is; swapping two indices here inverted every face and made the normals point inward
for (let i = 0; i < p.t.length; i++) { idx[i*3] = p.t[i][0]; idx[i*3+1] = p.t[i][1]; idx[i*3+2] = p.t[i][2]; }
geo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
geo.setIndex(new THREE.BufferAttribute(idx, 1));
geo.computeVertexNormals();
geo.computeBoundingSphere();
geo.computeBoundingBox();
delete p.v;
delete p.t;
const isMo = !p.printed && p.name[0] === 'M';
const isScr = !!p.screw; // 紧固件(螺钉):金属亮色,可被 BOM 行高亮
const mat = new THREE.MeshStandardMaterial({
color: p.color, metalness: isScr ? .78 : (isMo ? .55 : .05),
roughness: isScr ? .30 : (isMo ? .42 : .78),
transparent: isEnv, opacity: isEnv ? .06 : 1,
depthWrite: !isEnv,
flatShading: false, side: isEnv ? THREE.DoubleSide : THREE.FrontSide});
const ms = new THREE.Mesh(geo, mat);
ms.userData = p;
ms.position.set(p.ex[0], p.ex[2], -p.ex[1]);
ms.base = ms.position.clone();
ms.zero = [0,0,0];
if (isEnv) ms.visible = false; // 包络默认隐藏,走开关显示
JG[p.grp || 'root'].add(ms);
meshes.push(ms); byName[p.name] = ms;
}
+12
View File
@@ -0,0 +1,12 @@
/* three.js 适配层。
仓库里是 r159 的 UMD 构建(只有 build/three.min.js,没有离线 ESM 版),
所以仍由 index.html 用普通 <script> 先加载,本模块负责:
1) 把它转成真正的 ES 导出,业务代码一律 import 而不是抓全局;
2) 没加载就直接抛错,不要让 "THREE is not defined" 分散成几十个后续异常。
日后换成 ESM 构建时只改这一个文件。 */
const T = globalThis.THREE;
if (!T) {
throw new Error('three.js 未加载:index.html 里 vendor/three.min.js 必须在模块之前以普通脚本引入');
}
export const THREE = T;
export const V3 = T.Vector3;
+308
View File
@@ -0,0 +1,308 @@
/* 左栏交互:关节滑块、零件树、紧固件分组、BOM 与抽屉、工具条 */
/* ---- UI: joint sliders ----
滑块范围 = 电机行程 ±360°(docs/collide.json 的 motor_limit_deg;原 ±106° 作废)。
能拖到哪由几何说话:相邻件实测自由区间(与姿态无关)封顶,跨组零件对由胶囊碰撞
模型按当前姿态实时夹取(见 ik-glue 的 IK.clampAxis);docs/travel.json 的零位静态
扫描值只作 tooltip 参考——它是"其它轴全零"时对固定立柱的一次性结果,随姿态大变。 */
const JNAMES = ['J1','J2','J3','J4','J5','J6'];
const MOTOR = (typeof COLLIDE !== 'undefined' && COLLIDE.motor_limit_deg) || 360;
const jh = document.getElementById('joints');
for (const id of JNAMES) {
const j = JO.find(q => q.id === id); if (!j) continue;
const t = TL[id] || {lo:-180, hi:180, continuous:true, note:'360°旋转'};
const lo = -MOTOR, hi = MOTOR;
const d = document.createElement('div');
d.className = 'j-box';
d.innerHTML = '<div class="row"><label title="' + t.note +
'(电机行程 ±' + MOTOR + '°=滑块范围;零位静态扫描 ' + Math.floor(t.lo) + '°…' + Math.ceil(t.hi) +
'°仅作参考,实际边界随姿态由碰撞模型实时夹取。双击复位 0°)">' +
id + ' ' + j.cn +
(t.continuous ? ' <em class="ok" id="e' + id + '">整周可用</em>' : ' <em id="e' + id + '">' + lo + '°…' + hi + '°</em>') +
'</label><span class="j-val" id="v' + id + '" title="点击复位为 0°">0°</span></div>' +
'<input type="range" id="s' + id + '" min="' + lo + '" max="' + hi + '" value="0">';
jh.appendChild(d);
const inp = d.querySelector('input');
inp.oninput = ev => {
let v = +ev.target.value;
if (window.IK && IK.clampAxis) { // 动态限位夹取(glue 加载后才生效)
const c = IK.clampAxis(id, v);
if (c !== v) { v = c; ev.target.value = c; } // 滑块头停在真实边界上
}
ang[id] = v;
document.getElementById('v'+id).textContent = v + '°';
for (const q of JNAMES) applyJoint(q);
};
d.querySelector('.j-val').onclick = () => { inp.value = 0; inp.dispatchEvent(new Event('input')); };
d.querySelector('label').ondblclick = () => { inp.value = 0; inp.dispatchEvent(new Event('input')); };
inp.onchange = () => { // 松手后异步刷新动态范围标签(拖拽中不刷,避免卡顿)
if (window.IK && IK.refreshJointLabels) setTimeout(() => IK.refreshJointLabels(
['J1','J2','J3','J4','J5','J6'].map(x => (document.getElementById('s'+x) || {}).value || 0)), 0);
};
applyJoint(id);
}
const bRstJ = document.getElementById('resetJoints');
if (bRstJ) bRstJ.onclick = () => {
for (const id of JNAMES) {
const el = document.getElementById('s' + id);
if (el) { el.value = 0; el.dispatchEvent(new Event('input')); }
}
};
/* ---- UI: part tree ---- */
const th = document.getElementById('tree');
const groups = [['可达包络(运动学)', m => m.userData.name.slice(0,4) === 'ENV_'],
['打印件(新建)', m => m.userData.printed],
['电机模组(复用)', m => !m.userData.printed && m.userData.name[0]==='M'],
['端面齿联轴器/抱箍(已有)', m => !m.userData.printed && !m.userData.screw && m.userData.name[0]!=='M' && m.userData.name.slice(0,4) !== 'ENV_']];
for (const [gt, test] of groups) {
const ms = meshes.filter(test); if (!ms.length) continue;
const h = document.createElement('div'); h.className = 'gr'; h.textContent = gt + ' · ' + ms.length;
th.appendChild(h);
for (const m of ms) {
const p = m.userData;
const r = document.createElement('div'); r.className = 'row';
r.innerHTML = '<input type="checkbox" checked><span class="chip" style="background:#' +
p.color.toString(16).padStart(6,'0') + '"></span><label title="' + p.name + '">' +
'<span class="' + (p.printed?'pr':(p.name[0]==='M'?'mo':'ex')) + '">' + p.cn + '</span></label>' +
'<span class="q">#' + p.idx + '</span>';
const chk = r.querySelector('input');
m.chk = chk;
chk.onchange = e => {
m.visible = e.target.checked;
if (!m.visible && m === sel) { m.material.emissive.setHex(0); sel = null; }
requestRender();
};
r.querySelector('label').onclick = () => {
m.visible = !m.visible;
chk.checked = m.visible;
if (!m.visible && m === sel) { m.material.emissive.setHex(0); sel = null; }
requestRender();
};
th.appendChild(r);
}
}
/* ---- 紧固件(螺钉)分组:按规格聚合,一行 = 一种规格,勾选/点击作用于该规格全部实例 ---- */
const scrAll = meshes.filter(m => m.userData.screw);
const bySpec = {}, specChk = {};
for (const m of scrAll) (bySpec[m.userData.spec] = bySpec[m.userData.spec] || []).push(m);
if (scrAll.length) {
const h = document.createElement('div'); h.className = 'gr';
h.textContent = '紧固件 / 螺钉(按规格聚合) · ' + Object.keys(bySpec).length + ' 种 ' +
scrAll.length + ' 颗(点击名称定位)';
th.appendChild(h);
for (const sid of Object.keys(bySpec).sort()) {
const ms = bySpec[sid], p0 = ms[0].userData;
const r = document.createElement('div'); r.className = 'row';
r.innerHTML = '<input type="checkbox" checked><span class="chip" style="background:#' +
p0.color.toString(16).padStart(6,'0') + '"></span><label>' +
'<span class="ex">' + sid + ' ' + p0.cn.split(' · ')[0] + '</span></label>' +
'<span class="q">' + ms.length + ' 颗</span>';
const chk = r.querySelector('input');
specChk[sid] = chk;
chk.onchange = e => {
for (const m of ms) {
m.visible = e.target.checked;
if (!m.visible && m === sel) { sel.material.emissive.setHex(0); sel = null; }
}
requestRender();
};
r.querySelector('label').onclick = () => highlightSpec(sid);
for (const m of ms) m.chk = chk;
th.appendChild(r);
}
}
document.getElementById('allOn').onclick = () => {
meshes.forEach(m => {
m.visible = true;
if (m.chk) m.chk.checked = true;
});
bEnv.classList.toggle('on', meshes.some(m => m.userData.name.slice(0,4) === 'ENV_' && m.visible));
requestRender();
};
document.getElementById('allOff').onclick = () => {
meshes.forEach(m => {
m.visible = false;
if (m.chk) m.chk.checked = false;
if (sel) { sel.material.emissive.setHex(0); sel = null; }
});
bEnv.classList.remove('on');
bScr.classList.remove('on');
clearScrewHl();
requestRender();
};
document.getElementById('onlyPrint').onclick = () => {
meshes.forEach(m => {
m.visible = !!m.userData.printed;
if (m.chk) m.chk.checked = m.visible;
if (!m.visible && m === sel) { sel.material.emissive.setHex(0); sel = null; }
});
bEnv.classList.remove('on');
bScr.classList.remove('on');
clearScrewHl();
requestRender();
};
/* ---- BOM ---- */
const NMOT = DATA.parts.filter(p => p.name[0] === 'M').length; // count motors upfront
const tb = document.querySelector('#bom tbody');
let vTot = 0, gTot = 0;
for (const p of DATA.parts) {
if (!p.printed) continue;
vTot += p.vol; gTot += p.vol * 1.24e-3;
const tr = document.createElement('tr');
tr.innerHTML = '<td>' + p.idx + '</td><td>' + p.cn + '</td><td>' + (p.vol/1000).toFixed(1) + '</td><td>' +
(p.vol*1.24e-3).toFixed(0) + '</td>';
tr.dataset.idx = p.idx;
tr.title = p.name + (dimsStr(p) ? ',' + dimsStr(p) : '');
tb.appendChild(tr);
}
document.getElementById('sum').innerHTML =
'<i>打印件数</i><span>' + DATA.parts.filter(p=>p.printed).length + ' 种</span>' +
'<i>总体积</i><span>' + (vTot/1000).toFixed(1) + ' cm3</span>' +
'<i>总质量(PLA)</i><span>' + gTot.toFixed(0) + ' g</span>' +
'<i>电机数量</i><span>' + NMOT + ' 台(同款 电机.STEP)</span>' +
'<i>工作空间</i><span>约 ' + Math.round(BB[1][2]) + ' x ' + Math.round(BB[1][0]) + ' mm</span>';
/* ---- edge BOM dock: fasteners + merged parts BOM ---- */
const skb = document.querySelector('#screws tbody');
const bySize = {};
let nTot = 0;
for (const s of SCREWS) {
nTot += s.数量;
bySize[s.螺纹] = (bySize[s.螺纹] || 0) + s.数量;
const tr = document.createElement('tr');
tr.innerHTML = '<td><b>' + s.id + '</b> ' + s.规格 + '<br><small>' + s.头型 + '</small></td>' +
'<td>' + s.长度mm + '</td><td>' + s.数量 + '</td>' +
'<td>' + s.位置 + '<br><small>' + s.备注 + '</small></td>';
tr.dataset.spec = s.id;
tr.title = '点击:在三维模型中高亮该规格全部 ' + s.数量 + ' 颗并定位(再次点击切换到下一处)';
tr.onclick = () => highlightSpec(s.id);
skb.appendChild(tr);
}
const tally = Object.keys(bySize).sort().map(k => k + 'x' + bySize[k]).join(' / ');
document.getElementById('scrSum').textContent =
'共 ' + SCREWS.length + ' 种 ' + nTot + ' 颗(' + tally + ');另需 M4 螺母 4、M5 螺母 4、M6 螺母+平垫圈各 6,见各行备注' +
' —— 点击任一行可在模型中高亮定位该行螺钉(再次点击切换下一处,Esc 清除)';
document.getElementById('bomStat').textContent =
'紧固件 ' + nTot + ' 颗 / 打印件 ' + DATA.parts.filter(p=>p.printed).length + ' 种';
/* ---- 紧固件高亮定位(BOM 螺丝行 / 零件树 / 三维点选 三处共用)----
螺钉多数埋在沉孔或螺丝刀通道里,因此高亮时同时关闭深度测试做"穿透"显示,
让位置直接透过零件亮出来;相机再对该孔组自动对焦。 */
let hlSpec = null, hlIdx = 0;
function specMeshes(sid) { return meshes.filter(m => m.userData.screw && m.userData.spec === sid); }
function clearScrewHl() {
if (!hlSpec) return;
for (const m of specMeshes(hlSpec)) {
const mt = m.material;
mt.emissive.setHex(0); mt.emissiveIntensity = 0;
mt.transparent = false; mt.opacity = 1;
mt.depthTest = true; mt.depthWrite = true;
mt.needsUpdate = true; m.renderOrder = 0;
}
hlSpec = null;
for (const tr of document.querySelectorAll('#screws tbody tr')) tr.classList.remove('scrHl');
const hud = document.getElementById('hud');
if (hud && hud.dataset.scrHl) { hud.textContent = ''; delete hud.dataset.scrHl; }
requestRender();
}
function highlightSpec(sid, step) {
if (hlSpec !== sid) { clearScrewHl(); hlSpec = sid; hlIdx = 0; }
else if (step !== false) hlIdx++; // 再次点击同一行 -> 切换到下一处
const ms = specMeshes(sid);
if (!ms.length) return;
const inf = SCREWS.find(s => s.id === sid) || {规格: sid, 头型: '', 数量: ms.length, 位置: '', 备注: ''};
for (const m of ms) {
const mt = m.material;
if (!m.visible) { m.visible = true; if (m.chk) m.chk.checked = true; }
mt.emissive.setHex(0xff8a1e); mt.emissiveIntensity = 1.0;
mt.transparent = true; mt.opacity = .96;
mt.depthTest = false; mt.depthWrite = false; mt.needsUpdate = true;
m.renderOrder = 999;
}
scene.updateMatrixWorld(true);
const pts = ms.map(m => new V3(...m.userData.hl).applyMatrix4(m.parent.matrixWorld));
hlIdx = ((hlIdx % pts.length) + pts.length) % pts.length;
const c0 = pts[hlIdx];
const cl = pts.filter(p => p.distanceTo(c0) < 40.0); // 同一孔组(如某关节 3 颗)一同入框
const lo = [1e9,1e9,1e9], hi = [-1e9,-1e9,-1e9];
for (const p of cl) for (let i = 0; i < 3; i++) {
lo[i] = Math.min(lo[i], p.getComponent(i)); hi[i] = Math.max(hi[i], p.getComponent(i));
}
tx = (lo[0]+hi[0])/2; ty = (lo[1]+hi[1])/2; tz = (lo[2]+hi[2])/2;
const sp = Math.max(hi[0]-lo[0], hi[1]-lo[1], hi[2]-lo[2]);
rd = Math.max(150, sp * 2.6 + 130);
for (const tr of document.querySelectorAll('#screws tbody tr'))
tr.classList.toggle('scrHl', tr.dataset.spec === sid);
const tr0 = document.querySelector('#screws tbody tr[data-spec="' + sid + '"]');
if (tr0) tr0.scrollIntoView({block: 'nearest'});
const hud = document.getElementById('hud');
hud.dataset.scrHl = '1';
hud.innerHTML = '<b>' + sid + ' ' + inf.规格 + ' ' + inf.头型 + '</b> · ' + inf.数量 +
' 颗 —— 第 ' + (hlIdx + 1) + '/' + pts.length + ' 处:' + ms[hlIdx].userData.cn.split(' · ')[1] +
'<span class="hudlink" id="scrClr">清除高亮</span><br><small>' + inf.位置 + ';' + inf.备注 + '</small>';
const scl = document.getElementById('scrClr');
if (scl) scl.onclick = () => clearScrewHl();
requestRender();
}
const dock = document.getElementById('bomDock'), bTab = document.getElementById('bomTab');
function dockSet(open) {
dock.classList.toggle('open', open);
bTab.style.display = open ? 'none' : ''; // 展开时拉手藏掉,否则压住抽屉右缘
bTab.innerHTML = open ? '收起 <b>清单</b>' : '物料清单 <b>BOM</b>';
}
bTab.onclick = () => dockSet(!dock.classList.contains('open'));
document.getElementById('bomHide').onclick = () => dockSet(false);
document.addEventListener('keydown', e => { if (e.key === 'Escape' && !hlSpec) dockSet(false); });
/* ---- toolbar ---- */
const bAsm = document.getElementById('bAsm');
const bExp = document.getElementById('bExp');
const bWire = document.getElementById('bWire');
const bXRay = document.getElementById('bXRay');
const bScr = document.getElementById('bScr');
const bHarn = document.getElementById('bHarn');
const bEnv = document.getElementById('bEnv');
const bL = document.getElementById('bL');
const sheet = document.getElementById('sheet');
const stage = document.getElementById('stage');
const on = (id, f) => document.getElementById(id).onclick = f;
on('bAsm', () => { setExpl(0); exp.value = 0; tog(true, false); });
on('bExp', () => { setExpl(+exp.value/100 || .6); exp.value = exp.value || 60; tog(false, true); });
function tog(a, b) { bAsm.classList.toggle('on', a); bExp.classList.toggle('on', b); }
const exp = document.getElementById('exp');
exp.oninput = () => setExpl(exp.value/100);
on('bWire', () => { bWire.classList.toggle('on'); const w = bWire.classList.contains('on');
meshes.forEach(m => { if (m.userData.name.slice(0,4) !== 'ENV_') m.material.wireframe = w; }); requestRender(); });
on('bXRay', () => { bXRay.classList.toggle('on'); const o = bXRay.classList.contains('on');
meshes.forEach(m => { if (!m.userData.printed && m.userData.name[0]==='M') { m.material.opacity = o ? .34 : 1; m.material.transparent = o; } }); requestRender(); });
on('bEnv', () => { bEnv.classList.toggle('on'); const o = bEnv.classList.contains('on');
meshes.forEach(m => { if (m.userData.name.slice(0,4) === 'ENV_') { m.visible = o; if (m.chk) m.chk.checked = o; } });
requestRender(); });
on('bScr', () => { bScr.classList.toggle('on'); const o = bScr.classList.contains('on');
meshes.forEach(m => { if (m.userData.screw) { m.visible = o; if (m.chk) m.chk.checked = o; } });
if (!o) clearScrewHl();
requestRender(); });
on('bHarn', () => { bHarn.classList.toggle('on'); const o = bHarn.classList.contains('on');
if (window.setHarnessVisible) setHarnessVisible(o);
requestRender(); });
on('bFit', () => { fitTo(BB); az = -0.9; po = 1.15; camUp.copy(UP_Y); requestRender(); });
const app = document.getElementById('app');
on('bL', () => { app.classList.toggle('l'); bL.classList.toggle('on'); });
bL.classList.add('on');
document.getElementById('cam').onchange = e => {
const k = e.target.value;
camUp.copy(UP_Y); // upright roll for every view unless pinned below
if (k==='iso'){az=-0.9;po=1.15;} if(k==='front'){az=0;po=1.57;}
if(k==='side'){az=1.5708;po=1.57;}
// true plan view: pin the roll (near-vertical lookAt otherwise rolls the image) and
// frame by the plan extent - the height dimension is irrelevant looking down
if(k==='top'){az=-0.9;po=0.02;camUp.copy(UP_TOP);
rd=Math.max(BB[1][0]-BB[0][0],BB[1][2]-BB[0][2])*1.2+180;}
const hub = id => { const j = JO.find(q => q.id === id); return j ? VC(j.hub) : [tx, ty, tz]; };
if (k === 'wrist') { const a = hub('J5'), b = hub('J6'); // frame the whole hand,
tx = (a[0]+b[0])/2; ty = (a[1]+b[1])/2; tz = (a[2]+b[2])/2; rd = 340; az = -0.6; po = 1.25; }
// shoulder close-up has to hold BOTH the roll drum (J1) and the pitch fork (J2) - aiming at
// one hub alone filled the frame with a single Ø88 cylinder and showed nothing
if (k === 'joint') { const a = hub('J1'), h = hub('J2');
tx = (a[0]+h[0])/2; ty = (a[1]+h[1])/2; tz = (a[2]+h[2])/2; rd = 470; az = -0.6; po = 1.25; }
if (k === 'elbow') { const h = hub('J4');
tx = h[0]; ty = h[1] - 35; tz = h[2]; rd = 280; az = -0.6; po = 1.25; }
if (k === 'hand') { const h = hub('J6'); tx = h[0]; ty = h[1]; tz = h[2] - 45; rd = 215; az = -0.6; po = 1.25; }
requestRender();
};
+64
View File
@@ -0,0 +1,64 @@
/* URL 参数驱动的视图状态(供截图与分享复现) */
/* ---- url params so views can be scripted / shared: ?expl=60&j1=20&cam=iso&xray=0 ---- */
(function(){
const q = new URLSearchParams(location.search);
if (q.has('expl')) { exp.value = q.get('expl'); setExpl(+exp.value/100);
if (+exp.value) tog(false, true); }
for (const id of JNAMES) {
const k = id.toLowerCase();
if (q.has(k)) { const el = document.getElementById('s'+id);
el.value = q.get(k); el.dispatchEvent(new Event('input')); }
}
if (q.has('cam')) { const s = document.getElementById('cam'); s.value = q.get('cam'); s.dispatchEvent(new Event('change')); }
if (q.has('az')) az = +q.get('az');
if (q.has('po')) po = +q.get('po');
if (q.has('rd')) rd = +q.get('rd');
if (q.has('tx')) tx = +q.get('tx');
if (q.has('ty')) ty = +q.get('ty');
if (q.has('tz')) tz = +q.get('tz');
if (q.get('env') === '1') { const b = document.getElementById('bEnv');
if (b && !b.classList.contains('on')) b.onclick(); }
if (q.get('xray') === '0') { const b = document.getElementById('bXRay'); if (b && b.classList.contains('on')) b.onclick(); }
if (q.get('xray') === '1') { const b = document.getElementById('bXRay'); if (b && !b.classList.contains('on')) b.onclick(); }
if (q.get('wire') === '1') { const b = document.getElementById('bWire'); if (b && !b.classList.contains('on')) b.onclick(); }
if (q.has('alpha')) {
const a = +q.get('alpha');
meshes.forEach(m => {
if (m.userData.printed) {
m.material.transparent = true;
m.material.opacity = a;
m.material.depthWrite = a > 0.8;
}
});
}
if (q.get('harn') === '0') { const b = document.getElementById('bHarn'); if (b && b.classList.contains('on')) b.onclick(); }
/* 视图模式与工程图状态也要能用 URL 驱动:否则工程图/装配向导这两种模式(约占一半
CSS 与 700 行 JS)没法用 headless 截图回归,改动只能靠人眼抽查。 */
if (q.has('view')) {
const t = document.querySelector('.tab[data-view="' + q.get('view') + '"]');
if (t) t.click();
}
if (q.has('sheet')) {
const b = document.querySelector('#sheetTabs .sheet-tab[data-sheet="' + q.get('sheet') + '"]');
if (b) b.click();
}
if (q.has('theme')) {
const b = document.querySelector('.sheet-btn[data-theme="' + q.get('theme') + '"]');
if (b) b.click();
}
if (q.has('guide')) { const g = +q.get('guide'); if (isFinite(g)) renderGuideStep(g); }
if (q.has('j6')) { const el = document.getElementById('sJ6');
if (el) { el.value = q.get('j6'); el.dispatchEvent(new Event('input')); } }
if (q.has('hide')) {
const h = q.get('hide').split(',');
meshes.forEach(m => {
const nm = (m.userData && m.userData.name) || '';
const cn = (m.userData && m.userData.cn) || '';
if (h.some(k => nm.includes(k) || cn.includes(k))) {
m.visible = false;
if (m.chk) m.chk.checked = false;
}
});
}
requestRender();
})();

Before

Width:  |  Height:  |  Size: 163 KiB

After

Width:  |  Height:  |  Size: 163 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 163 KiB