全景H5制作操作文档

目标

制作VR全景图片的H5页面，实现通过链接访问H5，实现简单交互（滑动看和点击进入下一个房间）

工具&软件

insta360：便捷拍摄全景照片和4K级全景视频
epub360：H5交互设计利器 （导出收费）
Pano2VR：一款多国语言的全景图像转换工具，把全景图像转换成的QuickTime或者Macromedia Flash8和Flash 9格式的功能。
微盟：一个针对微信公众账号提供营销推广服务的第三方平台。
全景通

逻辑

已知epub360可以GUI界面做H5，可用【嵌入网页】组件，So，需要将全景图片打包一个HTML包嵌入，HTML包中应该包括全景图片和交互组件

第一步 获得全景照片

（可用VR设备直接拍或鱼眼镜头，全景云台，配合三脚架拼制，具体如下）

原始图像素材类型|采用的相机设备|采用的机位|采用的拼合模式|特点描述
------------- | ----------- | ------------ | ---------:

鼓形，两边被切的鱼眼图像： 上下弧线处180度 |Nikon或Canon单反相机 Sigma 8mm镜头|竖直拍摄 |拍摄水平一圈四张鱼眼图像，用（Drum）模式拼合：

|拍摄简单 图像清晰 推荐

全帧，四边被切的鱼眼图像： 对角线180度 |Nikon单反相机Nikon 10.5mm镜头|竖直拍摄 |拍摄水平一圈六张或者加天地两张鱼眼图像，用（Fullframe6+X）模式拼合： |拍摄较为复杂 图像清晰
全帧，四边被切的鱼眼图像： 对角线180度 |Nikon单反相机Nikon 10.5mm镜头|横向拍摄 |拍摄水平一圈四张或者加天地两张鱼眼图像，用（Fullframe4+X）模式拼合：

|拍摄较为复杂 图像清晰

整圆，所有角度都能够达到180度及以上 |Nikon或Canon全画幅单反相机适马8MM鱼眼镜头|横向拍摄或者竖向拍摄 |拍摄水平两张或者三张鱼眼图像，用（Circular）模式拼合： |拍摄简单 图像清晰
虚拟图像，由三维建模的场景渲染获得： 90度*90度 |3DmaxMayaAutoCAD或其他软件建模|无|渲染正方体形式六个面的图像，用（Cube Face）模式拼合： |效果可自行设定

于是综上。。。我们用较新技术的设备insta360，两个鱼眼镜头，直接内置拼合超方便！
由于当时拍的都是VR视频，这里使用的全景照片为VR视频的截屏。

第二步 将全景照片切片输出成H5格式

下载软件Pano2VR

Pano2VR界面

点击「选择输入」，将第一步生成的全景图片导入进去；同时点击「新输出格式」的下拉框，选择「HTML5」选项，然后点击「增加」按钮。

设置立方体面片尺寸为700设置输出文件的输出目录后，点击确定，就开始生成360全景效果了

浏览器会自动打开上图中的.html文件，360全景效果就可以被欣赏到了。

至此，实现本地端H5演示效果。（可放大缩小，左右移动）

第三步 如何上传服务器实现云端H5

方式一：微盟

微盟界面

切片图片上传后可生成网址
备注：微盟按请求数付费

方式二：全景通

• 全景软件教程-全景通
  备注：分为各种版本，不同价位

全景通别墅案例教程
1、新建项目
点击“新建项目”按钮。

1.jpg
然后填写标题并点击确定。
2.jpg

---

2、设置全局参数
选择喜欢的鼠标样式

3.jpg
然后点击最下方“确定”按钮提交。

3、添加场景
点击最顶部菜单“全景场景”

4.jpg
然后点击“添加新场景”。
5.jpg
则变成这个样子
6.jpg
然后点击下方的“确定”按钮。则添加成功。
7.jpg

4、添加所有场景
然后我们用上面的方法，来把所有场景都添加进去。如图所示

8.jpg

5、添加光晕效果
点击“客厅”场景的“修改按钮”。

9.jpg
看到修改界面，找到“光晕部分”，设置如图所示。
10.jpg
开启开关，然后单击“点击获取”按钮获取光晕位置。
11.jpg
当目标中心放到灯的位置，点击即可获取到此位置的数值。
最后，点击确定保存此次修改。

6、制作漫游
点击“客厅”场景的“热点管理”。

12.jpg
然后“添加新热点”
13.jpg
看到如下界面
14.jpg
然后抓取热点位置
15.jpg
16.jpg
转动到目标位置，然后点击白色箭头就可以获取到位置。
然后继续制作漫游事件
17.jpg
18.jpg
最后点击“确定提交”。
19.jpg
点击返回上级
20.jpg
就可以看到我们添加热点的效果了。
然后我们用同样的方法将所有热点都添加上。

7、开启控制面板+缩略图
点击控制面板

21.jpg
然后设置如图所示
22.jpg
然后点击“确定”保存。

7、UI与全景主持人
点击“UI界面”

23.jpg
点击“添加UI元素”
24.jpg
点击确定提交。
然后看到详细设置页面
25.jpg
根据图片修改，然后点击保存，就添加完成了。
同样方法，添加LOGO和全景主持人。

9、添加背景音乐
点击“全景参数”

26.jpg
然后修改背景音乐部分如图
27.jpg
然后点击“确定”保存即可。

10、设置地图
添加地图导航
点击地图管理

28.jpg
设置如图所示
29.jpg

然后点击确定保存
再然点击“详细场景”

30.jpg
31.jpg

将所有场景的地图参数都设置完成。我们的项目就完成了。下一步就是静态生成。

11、静态生成
将全景生成在任何网络都可以观看的格式
回到总的管理页面

32.jpg
再次点击“开始生成”就真的开始生成了。最终会给出文件所在文件夹的路径
33.jpg

结论

已知epub360可以GUI界面做H5，可用【嵌入网页】组件，So，需要将全景图片切片上传服务器，生成网址后嵌入，目前可用微盟或全景通实现。全景通交互组件更完备。

修订

20160426 初稿
20160427 补充全景通部分
20160429 修订