快速开始指南
本文带你 10 分钟做出第一个全景漫游 H5 作品。
准备工作
在开始之前, 请准备:
- 一张或多张 2:1 比例的 360 全景图, 推荐分辨率 4096×2048 或更高 (JPG / PNG)
- 充足的硬盘空间 (单张全景图导入后会生成多分辨率瓦片, 通常一张图占用 30~80 MB)
你可以右键保存下面的示例图片用于测试:
第一步: 新建作品并导入全景图
打开软件后会自动进入"作品库"页面, 点击 新建作品:
- 直接拖拽全景图到窗口, 或点击 从本地添加 / 从素材库添加
- 一次可选多张, 软件会自动切片为多分辨率瓦片
- 进度 100% 后, 点击确认创建按钮, 将自动加入作品库, 可立刻进入编辑
提示
新增的全景图会同步进入"素材库", 后续做其他作品时无需重新导入和切片。
第二步: 进入编辑器, 设置视角
双击或者右键可以进入作品编辑页面。
左下方是场景列表, 上方是工具栏, 右侧是属性面板, 中间是实时预览。
切换到 视角 标签:
- 当前初始视角: 用鼠标在中间的全景图里拖到合适的角度, 这就是观众打开作品时看到的画面
- 视角范围 (FOV): 拖动滑块限定可缩放的最近/最远焦距
- 垂直视角限制: 防止观众抬头/低头看到天空地面缝合处的瑕疵
第三步: 添加跳转热点 (做 多场景漫游)
切到 热点 标签, 点击 添加热点.
在中间预览里拖动热点图标到想要的位置, 然后:
- 在右侧面板选择类型 切 换
- 选择目标场景 (即另一张全景图)
- 选择过渡动画 (淡入淡出 / 缩放 / 黑场 / ...)
- 点击 完成
观众在作品中点击这个热点就会切换到目标场景, 实现"漫游"。
热点不只是场景切换
切换只是 8 种热点中的一种, 还可以添加 相册, 文本, 图文, 链接, 音频, 视频, 环物 等交互类型。详见 热点设置。
第四步: 添加背景音乐 (可选)
切换到 音乐 标签:
- 点击 选择音乐 → 从本地或素材库选择 MP3 文件
- 点击 应用到所有场景, 全部场景共享同一首背景音乐
- 也可以单独给某个场景设置 语音解说
第五步: 预览效果
回到作品库, 在作品上点击 预览 按钮, 软件会在新窗口打开播放器, 模拟最终 H5 的真实交互效果。
第六步: 导出离线 H5 项目
确认效果后, 返回作品库选中作品, 点击右侧 导出离线H5项目:
- 选择一个空文件夹
- 软件会把全部资源 (全景瓦片, 图片, 音频, JS, XML) 复制进去
- 完成后直接打开 文件夹里的
index.html即可在浏览器中查看 - 把整个文件夹上传到任意 Web 服务器 (Nginx / IIS / GitHub Pages / 对象存储) 即可发布
其他打包方式
导出页面下方提供了 导出 exe 安装包, 导出 apk 安卓应用, 导出 ipa 苹果应用 三个手动打包教程的入口, 可以根据需要进一步打包成原生应用。