实验动物学专业 · 3D 能力与素养多维图谱 使用说明

于杨课题组 · 迪医视角 · 实验动物学专业能力与素养多维图谱 | 配套网页:lab_animal_science_3d.html
版本校注 · 2026-09-07 挂载于课题组网站时追加 ① 引擎已内置:网站部署版(及课题组分发的离线拷贝)已把 Three.js 与 OrbitControls 放入 vendor/three-r128/, 打开无需联网;下文“必须联网 / CDN”一节描述的是本地早期原版,请以实际文件为准。
② 单课程子图谱:24 门课程的单课程能力素养图谱已随网站上线,课程详情面板中的跳转按钮可直接打开(新标签页,左上角可返回总图谱)。
③ 用途:本说明同时服务于教学干预实验(见第七节任务单),施测时请统一操作口径。

配套文件:0-实验动物学专业-多维图谱V3_副本.html 适用对象:本专业学生(学业规划 / 职业探索)、专业课教师(培养方案诊断)、教学管理人员(培养方案宣贯) 版本核对时间:2026-09-07(与本目录下 HTML 数据区逐项核对)


一、这个图谱是什么

把原本分散在培养方案不同章节里的四类信息——开了什么课、课程之间谁先谁后、每门课培养什么能力和什么素养、这些能力素养能通向哪些岗位——放进同一个 3D 空间,点一个节点就能把"课程 → 素养 + 能力 → 职业"这条链路完整拉出来。

本图谱为四层结构(比通用版多一层"素质素养层"):

知识层(课程 38 门)→ 素质素养层(8 项)+ 能力层(元能力 7 + 主干能力 10 + 技能点 24)→ 职业层(13 个岗位)

数据规模一览

层级 节点类型 数量 形状 / 颜色
知识层 课程 38(学科基础 16 / 专业核心 10 / 专业选修 12) 蓝色球体(专业课带粒子光环)
素质素养层 素质素养 8 粉色十二面体(菱形感),缓慢自转
能力层 元能力 7 紫色八面体
能力层 主干能力 10 绿色球体
能力层 技能点 24 橙色小球(无文字标签)
职业层 职业岗位 13 红色立方体

关系(连线)共 222 条:

关系 数量 线型 / 颜色
课程前置 → 后续 35 蓝色实线
课程 → 主干能力(支撑) 35 绿色虚线
课程 → 素质素养(支撑) 65 粉色虚线
主干能力 → 元能力(依赖) 17 紫色实线
主干能力 → 职业(匹配) 38 红色虚线
素质素养 → 职业(匹配) 32 粉色虚线

其中 24 门课程配置了单课程能力素养图谱子页面,点击节点后面板内会出现绿色跳转按钮(已核验:24 个链接文件全部存在于本目录,无死链)。


二、打开方式与环境要求

项目 要求
打开方式 直接双击 HTML 文件,或拖入浏览器
浏览器 Chrome / Edge 最新版(Safari 亦可用,Firefox 部分版本粒子效果偏暗)
联网 必须联网。Three.js 与 OrbitControls 从 CDN 加载,断网会白屏
加载耗时 正常网络 3–8 秒
硬件 需要 WebGL 支持;笔记本集成显卡可流畅运行

⚠️ 本文件没有加载失败兜底提示:若网络不通,画面会停在全黑且无任何报错提示。遇到全黑先检查网络,再刷新。 (同版本的医学实验技术专业图谱已加 loading 遮罩与三源 CDN 回退,这个专业图谱是早期版本,暂未同步该功能。)


三、界面速览

位置 元素 作用
顶部居中 标题栏 专业名 + "培养方案 → 知识体系 → 能力与素养图谱 → 职业关联"
左上 视图切换按钮(6 个) 切换显示层数 / 开关自动旋转
左下 图例 颜色、形状与节点类型的对照
右上 素质素养说明气泡 解释"素质素养层"是什么,点 ✕ 可关
右侧(点击后弹出) 信息面板 该节点详情 + 完整追溯链
底部居中 维度连接条 知识层 → 素养层 → 能力层 → 职业层的方向提示
右下 操作提示 "拖拽旋转 · 滚轮缩放 / 点击节点查看完整追溯链"

图谱全景
图谱全景(默认视角,全部图层):内圈为课程节点,外圈为能力与职业节点

四、基本操作

操作 方法
旋转视角 鼠标左键按住拖动
缩放 滚轮(可推近至距离 8,拉远至 60)
查看节点 左键单击节点(球体 / 菱形 / 立方体 / 八面体)
关闭面板 面板右上 ✕
恢复高亮 单击空白处(见下方注意事项)
暂停旋转 点左上角"🔄 自动旋转",按钮文字变为"⏸ 暂停旋转"

三条必须提醒的交互细节

  1. 默认是自动旋转的(速度 0.6,较慢)。想仔细看某个节点,先点"自动旋转"暂停,否则节点会飘走。
  2. 关闭面板 ≠ 恢复画面。点 ✕ 只隐藏面板,其他节点仍处于"变暗"状态。必须再点一下画布空白处,才会清除高亮、恢复全图。
  3. 切换到单层视图后,连线不会跟着隐藏。这是设计如此:切到"知识层"仍能看到该层通向能力层的虚线,方便观察跨层关联。

点击后会发生什么


五、五类节点分别能看到什么

1. 课程节点(蓝球)

面板内容依次是:

三维目标校验是本图谱对教师最有用的功能之一:哪门课只教知识、没挂能力、也没挂素养,一眼可见。基础课若显示能力维度缺失,面板会提示"通过支撑后续专业课间接实现"。

2. 素质素养节点(粉色菱形)

8 项素养:科研诚信、动物福利意识、团队协作精神、科学探究精神、社会责任感、终身学习意识、质量安全观念、人文关怀。

3. 主干能力节点(绿球)

4. 元能力节点(紫八面体)

5. 职业岗位节点(红立方体)

13 个岗位:高校教师/研究员、动物实验技术员、课题研究员、动物平台主管、海关检疫技术人员、食药检技术员、企业技术总监、研发工程师、CRO 项目经理、质量管理员、模式动物研发工程师、生物制品质量专员、研究生(深造)。

6. 技能点节点(橙色小球,无标签)

⚠️ 技能点是没有文字标签、也没有连线的(散布在能力层外圈,半径 15 的位置),只能靠点击探索。它是最细粒度的"可训练单元",适合教师在实验/实训教学设计时定位"这项能力到底要练哪些动作"。


六、四种典型用法

用法 A|新生入学教育:这个专业到底学什么(10 分钟)

  1. 点左上角 📚 知识层,只看课程
  2. 拖拽旋转,看 38 门课排成的螺旋环,蓝色实线是先后修读关系
  3. 点几门第 1–2 学期的课(如"动物学""无机化学"),看"后续课程"
  4. 切回 🌐 全部四层,感受课程往外扩散到素养、能力、职业的整体结构

用法 B|"学这门课有什么用"(3 分钟)

  1. 直接点某门课(如"实验动物学")
  2. 面板自下而上读:能力 → 素养 → 职业
  3. 想深挖就点面板里的绿色跳转按钮,进入该课程的单课程能力素养图谱

用法 C|"我想做某个岗位,该学什么"(5 分钟)

  1. 点 💼 职业层,先只看 13 个红方块
  2. 点目标岗位(如"模式动物研发工程师")
  3. 面板给出:需要的能力 → 每项能力对应的课程 → 底层元能力
  4. 反向对照自己的培养方案,找出还没修的课程

用法 D|教师端:培养方案诊断(15 分钟)

按顺序做三件事:

  1. 找课程孤岛:切到知识层,看有没有课程蓝色实线特别少或完全没有
  2. 查能力覆盖盲区:逐个点 10 个主干能力,看"向下追溯"里支撑课程的数量,支撑过少的能力要补
  3. 查三维目标缺口:逐个点课程,看面板底部"✅ 三维目标覆盖校验",出现 ❌ 的要补挂能力或素养

七、15 分钟标准探索任务单(供实证研究干预阶段使用)

为使"图谱组"的干预剂量标准化,建议不发问卷式引导,而是给下面这张任务单,人手一份,15 分钟按序完成。(对应《3D交互式多维图谱提升大学生专业认知度的实证研究》中"阶段二:干预")

序 任务 操作 对应测量题
1 数一数本专业的核心专业课有几门、分别是什么 切"知识层" 检索测试 T1
2 查"实验动物学"这门课支撑哪些主干能力 点课程节点 检索测试 T2
3 从"模式动物研发工程师"反向回溯,列出支撑它的课程 点职业节点 检索测试 T3
4 判断"质量检测控制"这项能力的课程支撑是否充分,说明理由 点主干能力节点 检索测试 T4
5 看"动物福利意识"由哪些课程培养、对哪些岗位重要 点素质素养节点 维度:素养认知
6 自由探索(剩余时间),任选自己感兴趣的课或岗位 任意 —

施测纪律:干预阶段不允许截图、记笔记或保存页面;后测检索题闭卷、独立作答、限时 5 分钟。 教师提示语(统一口径):"这是一个能查专业培养方案的工具,请按任务单自己点着看,有不懂的操作举手,我不解释内容。"