3D 模型 (3D Model)
让学习者以交互方式查看三维对象，支持旋转、缩放与平移；作者可上传 glTF/GLB 模型、为关键部位添加注释标签并设置背景与海报图。适合解剖、机械、建筑与艺术等空间结构的讲解。
本教程目标
- 了解 3D 模型内容类型的核心概念与适用场景
- 学习上传 glTF/GLB 模型、添加注释标签与视觉设置
- 掌握尺寸设置、性能优化与可访问性（替代文本与对比度）最佳实践
第一次使用课灵？
请先注册并登录课灵账号(可以使用微信登录)，在工作区点击"创建"，并选择『3D 模型（3D Model）』开始创作。
何时使用 3D 模型
- 展示结构复杂、需要空间感的对象：解剖模型、机械部件、建筑、艺术品等
- 让学习者通过旋转、缩放、平移进行自主探索，增强理解与记忆
教程示例
下面的示例展示了一款机器人 3D 模型，并在关键部位添加了注释标签，便于学习者识别与记忆。
支持旋转、缩放、平移；包含注释标签
交互说明
- 鼠标：拖拽旋转、滚轮缩放；按住右键或触控板两指拖拽进行平移
- 触屏：双指缩放、双指拖拽平移、单指拖拽旋转
- 键盘：部分实现支持方向键旋转与
+/-缩放
快速复制示例
- 点击 这里➜ 将示例复制到你的课灵工作区
- 在打开的页面点击“复制”
- 随后在生成的副本中点击“编辑”
- 即可查看并操作本教程所示的设置。
创建 3D 模型：分步指南
步骤 1：创建新内容
- 在课灵工作区点击「创建」，进入 H5P 编辑器
- 在内容类型列表中选择 『3D 模型』 或搜索
3D - 为内容设置 标题（用于检索与版权信息）
从 H5P 内容类型列表中选择『3D 模型』
步骤 2：上传 3D 模型文件
- 支持 glTF (.gltf) 与 GLB (.glb)，推荐使用单文件的 GLB（glTF 2.0 二进制） 格式
- 上传后可在编辑器预览窗口中查看模型加载效果
在 H5P 编辑器中上传 3D 模型文件并设置替代文本
步骤 3：设置替代文本
- 在 替代文本 字段填写简明准确的描述，帮助屏幕阅读器用户理解模型内容
- 示例：
傲娇机器人模型，包含眼睛、手、后背等部件
步骤 4：添加注释标签
- 在 注释 区域添加多个条目，如「手」「眼睛」「后背」
- 使用每条注释旁的定位按钮，将注释锚点添加到 3D 模型中的对应位置
- 标签应简短直观，避免遮挡关键结构；必要时分层放置避免相互重叠
在 3D 模型中添加注释标签，帮助学习者识别关键部位
步骤 5：视觉设置
- 背景图片/背景颜色：设置模型背景，提升对比度与视觉层次
- 海报图片：在大型 3D 模型加载前显示的占位图，适合体量较大的模型以减少空白等待
步骤 6：尺寸设置
- 最大宽度：以 CSS 单位（如
px、rem）控制展示区最大宽度 - 最小高度：确保在窄屏下仍有可交互区域
- 最大高度：上限高度（示例可设为
40rem，按页面排版与模型纵横比进行调整）
步骤 7：发布与测试
- 保存发布后即可预览并测试模型在桌面与移动端的交互体验（旋转、缩放、平移、标签可读性）
优化与可访问性建议
性能优化：
- 优先使用 GLB 单文件，减少外部纹理与材质引用
- 文件大小：建议单个 GLB 文件不超过 10MB（移动端建议 5MB 以内），以确保在 4G/5G 网络下的加载体验。
- 控制 面数/多边形数量 与纹理分辨率，避免过度复杂导致帧率下降
- 为大模型启用海报图，缩短白屏时间；必要时压缩资源并开启缓存
用户体验：
- 背景与模型保持足够对比度，避免透明/低对比度纹理影响识读
- 注释标签简洁、避让关键视角；
可访问性：
- ALT 文本必须完整准确；页面中对主要交互（旋转、缩放、平移）提供文字说明
- 若关键学习目标依赖模型细节，提供额外的静态图或文字阐释作为备选路径
专家建议：用例灵感与相关内容类型推荐
想拓展『3D 模型』的使用场景？以下示例可帮助你打开创作思路：
- 结构讲解：解剖模型、机械装配、建筑构件分解与对齐关系
- 艺术与文物：多角度欣赏与细节标注，结合注释标签形成导览
- 实验教学：仪器设备部件识别与操作路径演示（配合步骤图与文字）
- 产品展示：支持旋转、缩放与材质对比，适合技术规格说明书
- 安全培训：标注风险点与安全检查流程，强化场景化记忆
如果你希望实现相近的互动呈现，也可以考虑以下 H5P 内容类型：
- 『虚拟游览 360（Virtual Tour 360）』：适合场景漫游与空间方位说明
- 『图像热点（Image Hotspots）』：在静态图上添加可点击标签，轻量替代 3D
- 『互动书（Interactive Book）』：整合多种互动组件，构建章节化课程
- 『课程演示（Course Presentation）』：通过幻灯片线性讲解，将 3D 链接或截图嵌入