跳到主要内容

虚拟游览 360 (Virtual Tour 360)

虚拟游览 360 (Virtual Tour 360) 允许您利用 360° 全景图片或普通静态图片构建沉浸式的空间探索体验。您可以在场景中嵌入文本、多媒体（图像/音视频）及互动问题（如单选题），适合用于校园参观、博物馆导览、实景教学与安全演练。

本教程目标​

  1. 了解虚拟游览 360 的结构与适用场景
  2. 掌握全景素材导入、热点交互与场景跳转
  3. 熟悉导航与可访问性优化

第一次使用课灵？

请先注册并登录课灵账号(可以使用微信登录)，在工作区点击"创建"，并选择『虚拟游览 360 (Virtual Tour 360)』开始创作。

注册/登录

何时使用虚拟游览 360​

  1. 空间导览：校园、实验室或展馆的沉浸式参观
  2. 流程训练：在场景中设置步骤提示与检查点
  3. 安全教育：热点提示风险点与规范操作
  4. 项目展示：以空间化方式呈现成果与细节

教程示例​

前置知识

虚拟游览 360 (Virtual Tour 360) 本质上是一个用于构建空间导航的容器。它的核心在于将全景图或静态图作为场景，并在其中嵌入其他 H5P 内容类型（如文本、图片、视频、单选题等）。 因此，要充分利用此组件，建议您先熟悉这些基础组件的使用方法。本教程将侧重于如何创建场景及设置导航逻辑，而非讲解子组件的具体配置。

下面是一个包含多个场景节点（如佩特拉古城的罗马剧场、士兵墓等）的虚拟游览示例。

示例展示了佩特拉古城的全景游览，包含场景跳转与信息热点（拖动鼠标或滑动屏幕可调整视角）
快速复制示例
  • 点击 这里➜ 将示例复制到你的课灵工作区
  • 在打开的页面点击"复制" (注意：请确保已登录课灵账号，否则无法复制)
  • 随后在生成的副本中点击"编辑"
  • 即可查看并操作本教程所示的设置。

创建虚拟游览：分步指南​

步骤 1：创建新内容​

  1. 在课灵工作区点击"创建"，进入 H5P 编辑器
  2. 在内容类型列表中选择 『Virtual Tour 360 (虚拟游览 360)』 或搜索 virtual
  3. 进入编辑界面开始配置
选择虚拟游览内容类型
从 H5P 内容类型列表中选择『虚拟游览 360』

步骤 2：设置标题与场景​

  1. 标题 (Title)：输入内容的标题，例如 Virtual Tour of Petra。
  2. 新建场景 (New Scene)：
    • 点击左下角的 『+ 新建场景 (+ New scene)』 按钮。
    • 场景类型 (Scene Type)：选择 360度图片 (360 Image) 或 静态图片 (Static Image)。
      • 360度图片：使用等距圆柱投影图片，支持全方位旋转查看。
      • 静态图片：使用普通平面图片，用户可以缩放和移动查看细节。
    • 场景标题 (Scene Title)：为该场景命名，如 Scene 01 Roman Theater。
    • 场景背景 (Scene Background)：点击 『添加 (Add)』 上传您的图片。
      • 版权信息

        上传图片后，建议点击 『编辑版权 (Edit copyright)』 填写来源与许可信息（如 Title, Author, License），这对于教育资源的合规引用非常重要。

    • 场景描述 (Scene Description)：可选，添加对该场景的文字描述。
    • 按钮样式 (Button Style)：
      • 新场景 (箭头)：用于跳转到其他场景。
      • 更多信息 (+)：用于展示该场景的额外信息。
    • 音轨 (Audio Track)：可选，为该场景添加特定的背景音乐或解说。
    • 点击 『完成 (Done)』 保存场景。
新建场景与背景设置
上传全景背景图并设置场景基本信息
提示

您可以重复此步骤添加多个场景。在编辑器底部的 场景列表 中可以切换和管理这些场景。

步骤 3：编辑界面概览​

创建场景后，您将进入主编辑界面：

  • 顶部工具栏 (Top Toolbar)：包含可添加到场景中的各种交互元素。
    • 导航 (Go to scene) 1：添加跳转热点，连接不同场景。
    • 文本 (Text) T：添加文字说明标签。
    • 图片 (Image) 🖼️：添加弹出图片。
    • 音频 (Audio) 🔊：添加音频解说。
    • 视频 (Video) 🎬：添加视频弹窗。
    • 总结 (Summary) 📑：添加总结性任务。
    • 单选题 (Single Choice Set) 📝：添加单选测验。
  • 主视图 (Main View)：显示当前场景的全景预览。
    • 您可以拖动画面查看不同角度。
    • 点击右下角的 『设置起始位置 (Set starting position)』 按钮，可以保存当前视角作为用户进入该场景时的默认视角。
编辑器界面
虚拟游览 360 编辑器界面
  • 底部栏 (Bottom Bar)：管理所有场景。点击左下角的场景名称可展开 场景选择器 (Scene Selector)，这是管理多场景漫游的核心区域：
    • 切换场景：点击列表中的场景名称，即可切换到该场景进行编辑。
    • 设为起始场景 (Set as starting scene)：点击场景旁的 旗帜图标，将其高亮。被标记的场景将作为用户打开内容时看到的第一个场景。
    • 编辑场景：点击 笔状图标，可以重新修改场景标题、背景图或背景音乐。
    • 删除场景：点击 垃圾桶图标 删除该场景（注意：删除场景不会自动删除其他场景中指向该场景的跳转热点，需手动清理）。
    • + 新建场景 (+ New scene)：继续添加新场景。
场景选择
场景选择器

步骤 4：添加交互与导航​

  1. 添加场景跳转 (Navigation)：
    • 在顶部工具栏点击 箭头图标 (Go to scene)。
    • 在弹出的设置中，选择 目标场景 (Target Scene)（即点击后跳转到的场景）。
    • 设置 标签 (Label)，例如 Go to Tomb Soldier。
    • 点击 『完成』，然后将箭头图标拖动到全景图中对应的位置（例如路口或门洞处）。
    • 双向导航 (Bi-directional Navigation)

      至关重要：H5P 不会自动创建返回按钮。 当您添加了从 场景 A 到 场景 B 的跳转后，请务必切换到 场景 B，添加一个指向 场景 A 的跳转热点。否则，用户一旦进入场景 B，将无法返回，导致体验中断。

  2. 添加信息热点：
    • 点击工具栏上的 文本、图片 或 视频 图标。
    • 输入相应的内容。
    • 将其放置在场景中感兴趣的物体上（例如点击雕像显示详细介绍）。
添加跳转与信息热点
设置场景间的跳转箭头及信息热点

步骤 5：全局设置​

在编辑器底部的 行为设置 (Behavioral Settings) 区域，您可以配置全局选项：

  • 默认音频 (Default Audio)：添加一段适用于所有场景的背景音乐。
  • 场景渲染质量 (Scene Rendering Quality)：
    • 建议选择 高质量 (High quality) 以获得更好的视觉效果，但这可能会增加加载时间。
  • 标签设置 (Label Settings)：
    • 标签位置 (Label position)：设置热点标签的对齐方式（如右对齐）。
    • 显示标签 (Show label)：勾选后，标签将直接显示在图标旁；如果不勾选，则仅在鼠标悬停时显示。
行为设置
全局设置，包括默认音频、场景渲染质量和标签显示选项

步骤 6：保存与预览​

完成所有场景的连接和内容填充后，点击 『保存并关闭』。

  • 测试场景间的跳转是否顺畅，热点信息是否准确。
  • 建议在移动设备上预览，检查触摸交互体验及全景图加载速度。

交互说明​

  • 拖拽与点击：鼠标或触控拖拽改变视角；点击热点图标触发内容或跳转。
  • 全屏体验：建议引导学习者使用 全屏模式 浏览，以获得最佳沉浸感。
  • 导航提示：提供显性的“返回”或“地图”入口，避免学习者迷失方向。

优化与可访问性​

  • 替代文本：为所有图片热点和导航按钮设置清晰的 aria-label 或替代文本。
  • 键盘可用性：确保所有热点均可通过 Tab 键聚焦并使用 Enter 或 Space 激活。
  • 色彩与对比度：热点图标颜色应与背景图有足够对比，避免在复杂背景中“隐身”。
  • 引导标记：对于复杂场景，可使用静态箭头图片辅助指示浏览顺序。

专家建议​

  • 控制密度：避免单场景堆砌过多热点，保持探索的节奏感。
  • 入口指引：在起始场景设置简短的“操作指南”或“全景图概览”。
  • 任务驱动：结合课程目标设计任务点（如：找到隐藏的安全隐患、回答场景相关问题）。
  • 组合与选型：
进阶技巧：状态切换

利用场景管理中的 克隆场景 功能，可以快速创建基于同一背景图的不同状态（如：整洁/凌乱的实验室），通过热点跳转实现“找茬”或“整改”的互动效果。

最后由 Sam Xu 于 更新