目标
制作VR全景图片的H5页面，实现通过链接访问H5，实现简单交互（滑动看和点击进入下一个房间）
工具&软件
insta360：便捷拍摄全景照片和4K级全景视频
epub360：H5交互设计利器 （导出收费）
Pano2VR：一款多国语言的全景图像转换工具，把全景图像转换成的QuickTime或者Macromedia Flash8和Flash 9格式的功能。
微盟：一个针对微信公众账号提供营销推广服务的第三方平台。
全景通
逻辑
已知epub360可以GUI界面做H5，可用【嵌入网页】组件，So，需要将全景图片打包一个HTML包嵌入，HTML包中应该包括全景图片和交互组件
第一步 获得全景照片
（可用VR设备直接拍或鱼眼镜头，全景云台，配合三脚架拼制，具体如下）
原始图像素材类型|采用的相机设备|采用的机位|采用的拼合模式|特点描述
------------- | ----------- | ------------ | ---------:
|拍摄简单 图像清晰 推荐
全帧，四边被切的鱼眼图像： 对角线180度
|拍摄较为复杂 图像清晰
虚拟图像，由三维建模的场景渲染获得： 90度*90度
于是综上。。。我们用较新技术的设备insta360，两个鱼眼镜头，直接内置拼合超方便！
由于当时拍的都是VR视频，这里使用的全景照片为VR视频的截屏。
第二步 将全景照片切片输出成H5格式
下载软件Pano2VR
点击「选择输入」，将第一步生成的全景图片导入进去；同时点击「新输出格式」的下拉框，选择「HTML5」选项，然后点击「增加」按钮。
设置立方体面片尺寸为700设置输出文件的输出目录后，点击确定，就开始生成360全景效果了
浏览器会自动打开上图中的.html文件，360全景效果就可以被欣赏到了。
至此，实现本地端H5演示效果。（可放大缩小，左右移动）
第三步 如何上传服务器实现云端H5
方式一：微盟
切片图片上传后可生成网址
备注：微盟按请求数付费
方式二：全景通
-
全景软件教程-全景通
备注：分为各种版本，不同价位
全景通别墅案例教程
1、新建项目
点击“新建项目”按钮。
然后填写标题并点击确定。
2、设置全局参数
选择喜欢的鼠标样式
然后点击最下方“确定”按钮提交。
3、添加场景
点击最顶部菜单“全景场景”
然后点击“添加新场景”。
则变成这个样子
然后点击下方的“确定”按钮。则添加成功。
4、添加所有场景
然后我们用上面的方法，来把所有场景都添加进去。如图所示
5、添加光晕效果
点击“客厅”场景的“修改按钮”。
看到修改界面，找到“光晕部分”，设置如图所示。
开启开关，然后单击“点击获取”按钮获取光晕位置。
当目标中心放到灯的位置，点击即可获取到此位置的数值。
最后，点击确定保存此次修改。
6、制作漫游
点击“客厅”场景的“热点管理”。
然后“添加新热点”
看到如下界面
然后抓取热点位置
转动到目标位置，然后点击白色箭头就可以获取到位置。
然后继续制作漫游事件
最后点击“确定提交”。
点击返回上级
就可以看到我们添加热点的效果了。
然后我们用同样的方法将所有热点都添加上。
7、开启控制面板+缩略图
点击控制面板
然后设置如图所示
然后点击“确定”保存。
7、UI与全景主持人
点击“UI界面”
点击“添加UI元素”
点击确定提交。
然后看到详细设置页面
根据图片修改，然后点击保存，就添加完成了。
同样方法，添加LOGO和全景主持人。
9、添加背景音乐
点击“全景参数”
然后修改背景音乐部分如图
然后点击“确定”保存即可。
10、设置地图
添加地图导航
点击地图管理
设置如图所示
然后点击确定保存
再然点击“详细场景”
将所有场景的地图参数都设置完成。我们的项目就完成了。下一步就是静态生成。
11、静态生成
将全景生成在任何网络都可以观看的格式
回到总的管理页面
再次点击“开始生成”就真的开始生成了。最终会给出文件所在文件夹的路径
结论
已知epub360可以GUI界面做H5，可用【嵌入网页】组件，So，需要将全景图片切片上传服务器，生成网址后嵌入，目前可用微盟或全景通实现。全景通交互组件更完备。
修订
20160426 初稿
20160427 补充全景通部分
20160429 修订
