医药作用机制动画 3D

概述

授权说明

本技能依赖百通 AI 服务平台的授权服务，使用前需先校验授权状态：

python scripts/auth.py --ensure

• 返回 AUTH_OK：授权有效，进入下方业务流程。
• 返回其他信号：需先在百通 AI 服务平台完成注册与授权，再重新执行一次 --ensure（平台入口以脚本输出的地址为准）。
• 凭证与绑定参数见 python scripts/auth.py --help；连续两次校验失败则暂停业务并提示用户完成平台授权。

医药机理图 3D 动画（three.js 内联）

目的

把 2D 讲不清的空间结构叙事做成三维单文件动画。与 2D 版（pharma-moa-html-animation）共享同一套机制叙事与合规内核，区别只在表现通道：2D 用 SVG+CSS，3D 用 three.js。三条刚性需求不变——内网能开（three UMD 内联进单文件，零依赖）、能逐帧讲解（可定格可倍速）、换靶点不必重做（改场景元素即可）。

适用与不适用

适用：左右双区/多区同屏对照、细胞周期环形轨道与闸门开合、受体-配体结合的空间关系、药物分子漂移与弹开、药雾/粒子类效果、需要在投屏时旋转视角展示空间关系的机制。

不适用：2D 已够清楚的平面机制（用 pharma-moa-html-animation，更轻更快）；蛋白真实三维结构（改用结构生物学工具出图后嵌入）；需要物理仿真的分子动力学（three.js 不负责仿真）。

技术选型铁律

three.js（UMD 构建，全局 window.THREE）内联进单文件，产出双击离线即开。具体：three@0.149.0 的 build/three.min.js（r150 起不再提供 UMD 单文件）。

• 不要用 CDN 外链（内网打不开，违背零依赖）。
• 不要用 Canvas/PixiJS 手写 3D（场景复杂后维护成本高，three 场景图/材质/灯光是现成的）。
• 文字一律走 HTML 覆盖层（字幕/导航/角标/免责），3D 内只放几何与必要的文字精灵，规避 Canvas 文字糊与合规扫描盲区。

五步工作流

第 1 步 · 拆机制（六拍骨架）

⚠️ 整片只传达一个核心主张。写完六拍问自己：观众看完应能复述哪一句？不服务于这句话的场景都该删。

第 2 步 · 定舞台（三维）

• 相机：透视相机（fov≈44），位置略俯视看向场景中心；默认固定视角即可，需要时再加拖拽旋转/滚轮缩放。
• 平台：左右分色双平台承载"骨髓 vs 肿瘤"这类对照叙事；平台加边缘描边线强化分区。
• 灯光：环境光 + 主方向光 + 左右分区点光（左青右红），区隔两区的情绪。

第 3 步 · 建场景

按顺序：双平台 → 细胞单元（细胞球 + 核 + 四段环形周期轨道 + 白球指针 + G1/S 闸门）→ 药物分子（八面体晶体）→ 药雾粒子 → 护盾/击中扩散环 → 血象/肿瘤负荷仪表。角色各自独立 Group，便于整体调位。

第 4 步 · 铺时间轴

虚拟时间驱动：所有运动由 updateScene(t) 按当前秒数计算，关键帧统一用 kf(tt, [[t,v],...]) 数组表达，整体调档只改数组。闸门落/抬、停驻/恢复的判定逻辑集中在 updateScene 内。播放循环用 requestAnimationFrame 推进 t，获得播放/暂停/倍速/拖拽/?t= 定格全套能力。

第 5 步 · 加控制与合规

复制 assets/3d-template.html 的控制层（按钮、进度条、阶段字幕、四幕导航、免责声明），接入合规标注，然后跑合规闸门：

python scripts/check_compliance.py 你的输出.html

exit 非 0 不得交付。修改动画后必须跑一次截帧：node scripts/shoot_3d.js 你的输出.html 0.1 3.2 8.4 ... 逐帧目视核对机制逻辑与排版。

可控时间轴

• boot() 默认 playing=true：打开即自动播放；仅 URL 带 ?t= 定格参数时才停在指定帧（供逐帧核对）。初始 playing=false 会让观众误以为"动画坏了不能动"。
• 3D 版不依赖 CSS 动画，直接用 rAF 推进 t 再 updateScene(t) + renderer.render()，天然可定格。

3D 特有坑（均已实测，务必遵守）

1. 药雾别用半透明实色大盒：半透明 Box 会把整半区罩灰、遮挡主体。改用 THREE.Points + AdditiveBlending 粒子云（窄高度带内沉降 + 缓慢旋转），只渲染雾不挡主体。
2. 分区名只留 HTML 角标：3D 悬浮文字精灵（CanvasTexture）易与 HTML 角标重复、被裁切/压字。分区标题用绝对定位 HTML 角标承载。
3. "关不上的门"要比实心门明显虚：用暗淡纤细 wireframe 柱（低 opacity + 暗色），与实心琥珀门形成强弱对比，否则"关不上"语义立不住。
4. 分子/指针终态、标签压细胞等机制语义位置，3D 透视下更易错位，静态结构断言抓不到，必须逐帧目视核对。

合规红线

医药机制动画受宣传物料同等监管：

• 画面内固定标注"机制示意图，不代表真实分子构象、空间比例或临床数据"。
• 靶点、通路、机制表述须与说明书或已发表文献一致，不得演绎。
• 不得以动画暗示疗效或安全性优于竞品；对比动画须格外审慎。
• 不得出现未获批适应症的画面或文案。
• 机制表述须可追溯：依据（说明书章节 / 文献 / 指南）须随交付物留痕。
• 任意一帧截图即构成宣传物料，对外须经医学与法规审核。
• 对外版本加"仅供医学专业人士参考"角标。

（以上由 scripts/check_compliance.py 自动把守 R1 免责声明 / R2 疗效禁词 / R3 商标符号 / R4 竞品对比 / R5 机制来源留痕，其余条目属人工审核项。）

交付前自查清单

• [ ] 初始帧（t=0）无残留元素、无黑屏
• [ ] 打开即自动播放（不带 ?t= 真实打开确认一次，截帧脚本带 ?t= 无法暴露此问题）
• [ ] 药雾是粒子云，不罩灰主体
• [ ] 文字（HTML 覆盖层）与 3D 元素无重叠遮挡
• [ ] 闸门/停驻/恢复/护盾/击中等机制事件与字幕时间点一致
• [ ] 免责声明与机制留痕就位
• [ ] 合规闸门 exit 0
• [ ] 用 shoot_3d.js 多时间点逐帧目视核对过

资源索引

• assets/3d-template.html —— 3D 母版（three 占位符 /*__THREE__*/）。含双平台、6 细胞单元 + 周期环 + 闸门、分子漂移、药雾粒子、护盾/击中环、血象/肿瘤负荷仪表、18s 七幕 + 四幕导航 + 控制层 + 免责留痕。新建时复制改场景。
• references/3d-guide.md —— 3D 详细工作流、三个特有坑、WebGL 无头截图参数。
• scripts/build_3d.py —— 把 three UMD 内联进模板产出单文件，自动探测库路径、含尾部完整性断言。
• scripts/shoot_3d.js —— 3D 定格截帧器（puppeteer + SwiftShader，?t= 定格逐帧目视）。修改动画后必须跑一次。
• scripts/check_compliance.py —— 合规闸门（R1–R5），交付前必跑。
• examples/trilaciclib-moa-3d.html —— 成品示例（约 600KB，已内联 three 库），仅供演示效果/投屏双击直接打开，执行任务时无需读取。真正的执行资产是 assets/3d-template.html（约 22KB，占位符模板）+ scripts/。

版本记录

• v1.0.0 · 2026-09-13 · 从 pharma-moa-html-animation 的 3D 通道独立成技能。沉淀 3D 特有坑（药雾粒子云 / 分区名 HTML 角标 / 虚门弱化 / 逐帧目视）、WebGL SwiftShader 截帧方案、成品示例曲拉西利。
• v1.1.0 · 2026-09-13 · 首轮优化闭环：description 补负向边界（2D 够用→pharma-moa-html-animation，降误触发）；examples 成品显式隔离为"非执行资产"（617KB 内联成品与 22KB 执行模板分离，token 效率）；补齐 tests/黄金集（G1-G5，5/5）与 wiki/ 三层。