|
- <!doctype html>
- <html lang="zh-CN">
- <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
- <title>背景与讲解实时 3D、双车取景检查</title>
- <style>
- *{box-sizing:border-box}body{margin:0;background:#f2f7f5;color:#193c35;font:15px/1.75 system-ui,sans-serif}main{max-width:1500px;padding:32px;margin:auto}h1{font-size:28px;margin:0 0 12px}h2{font-size:21px;margin:0 0 14px}p{margin:8px 0}a{color:#00866c}section{background:#fff;border:1px solid #d2e2dc;border-radius:12px;padding:24px;margin:24px 0}.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}figure{margin:0}figcaption{margin-bottom:8px;color:#526d65}img{display:block;width:100%;border:1px solid #d2e2dc;border-radius:6px}details{margin-top:16px}summary{cursor:pointer;color:#00866c}code{font-size:13px;overflow-wrap:anywhere}.note{font-size:13px;color:#526d65}@media(max-width:900px){main{padding:16px}.grid{grid-template-columns:1fr}}
- </style>
- <main>
- <h1>背景与讲解实时 3D、双车取景检查</h1>
- <p>2026-09-25 · 本地开发环境 · 正式教员预览入口</p>
- <section>
- <p>006 默认取景向左调整，主车与支援车分别避让数字教员、右侧工具栏。复位时采用相同布局，窄屏根据剩余空间自动取景。</p>
- <p>005–008 共 11 个背景/讲解页的场景图片，已替换为实时 3D。预览从整车视角开始缓慢旋转，约 3 分钟一圈，可暂停和继续。原有视频类型讲解仍使用视频播放器。</p>
- <p>预览与操作共用已加载的模型、场地、HDR 和 WebGL 画布，使用独立预览相机。进入操作步骤时停止旋转；从部件聚焦返回背景页，再回到操作页，保持原来的操作相机、步骤与零件状态。数字人视频默认仍不自动播放。</p>
- <p>已通过：14 项单元与契约检查；四个脚本在 1920 × 945 桌面和 1366 × 768 笔记本下的浏览器检查；生产构建（含类型检查、legacy 模型编辑器产物校验）。</p>
- <p><a href="result.json">桌面结果</a> · <a href="../bridge-introduction-3d-20260925-laptop/result.json">笔记本结果</a> · <a href="../bridge-introduction-3d-20260925-resize/result.json">全屏与缩放结果</a> · <a href="../bridge-introduction-3d-20260925-laptop-layout/result.json">笔记本全屏与面板展开/收起</a></p>
- <details><summary>环境、检查范围与命令</summary>
- <p>桌面 <code>http://127.0.0.1:6180</code>；笔记本 <code>http://192.168.31.168:6180</code>；沿用 Vite 至 6100 Gateway 的 API 代理。使用 root 教员预览，没有提交成绩或修改场景/训练配置。</p>
- <p><code>node --test scripts/training-overview.test.mjs scripts/introduction-orbit.test.mjs scripts/introduction-narration.test.mjs scripts/training-introduction.test.mjs scripts/virtual-training-formal-route.contract.test.mjs</code></p>
- <p><code>node tools/bridge-introduction-3d-live.mjs</code>；通过 <code>WIDTH / HEIGHT / BASE_URL / REPORT_SUFFIX</code> 切换窗口与地址，通过 <code>CHECK_LAYOUT=1</code> 补查全屏与窗口缩放。</p>
- <p><code>pnpm build</code> 通过。现有的大文件体积提示不影响构建。</p>
- <p class="note">浏览器检查覆盖真实旋转、暂停/继续、所有背景与讲解页、单画布复用、数字人手动播放、返回操作、聚焦视角保留、复位比例与双车遮挡。几何单元测试覆盖整圈旋转的取景范围。没有重新执行全部拆装流程。</p>
- </details>
- </section>
- <section><h2>006：支援车避开面板</h2><div class="grid">
- <figure><figcaption>调整前</figcaption><a href="../bridge-entry-view-20260925/task-87-overview.png"><img src="../bridge-entry-view-20260925/task-87-overview.png" alt="006 调整前，支援车被工具栏遮挡"></a></figure>
- <figure><figcaption>调整后</figcaption><a href="task-87-operation.png"><img src="task-87-operation.png" alt="006 两车避开面板"></a></figure>
- </div></section>
- <div id="scenes"></div>
- <script>
- const tasks=[['86','005 液压泵应急切换'],['87','006 液压泵应急替代'],['88','007 前泵换件修复'],['89','008 平衡阀拆拼互换']];
- const photo=(src,label)=>`<figure><figcaption>${label}</figcaption><a href="${src}" target="_blank"><img src="${src}" alt="${label}" loading="lazy"></a></figure>`;
- document.querySelector('#scenes').innerHTML=tasks.map(([id,title])=>`<section><h2>${title}</h2><div class="grid">${photo(`task-${id}-background.png`,'背景页：实时 3D，截图时暂停旋转')}${photo(`task-${id}-operation.png`,'返回操作步骤')}</div><details><summary>查看讲解页、复位与笔记本画面</summary><div class="grid">${id==='86'||id==='87'?photo(`task-${id}-lecture.png`,'讲解页：同一场景继续缓慢旋转'):''}${photo(`task-${id}-reset.png`,'聚焦后复位')}${photo(`../bridge-introduction-3d-20260925-laptop/task-${id}-background.png`,'笔记本背景页')}${photo(`../bridge-introduction-3d-20260925-laptop/task-${id}-operation.png`,'笔记本操作页')}</div></details></section>`).join('');
- </script>
- </main>
- </html>
|
