全景H5制作操作文档

目标

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

工具&软件

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

逻辑

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

第一步 获得全景照片

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

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

鼓形,两边被切的鱼眼图像: 上下弧线处180度
全景H5制作操作文档_第1张图片
|Nikon或Canon单反相机 Sigma 8mm镜头|竖直拍摄
|拍摄水平一圈四张鱼眼图像,用(Drum)模式拼合:

|拍摄简单 图像清晰 推荐

全帧,四边被切的鱼眼图像: 对角线180度
全景H5制作操作文档_第2张图片
|Nikon单反相机Nikon 10.5mm镜头|竖直拍摄
|拍摄水平一圈六张或者加天地两张鱼眼图像,用(Fullframe6+X)模式拼合:
|拍摄较为复杂 图像清晰
全帧,四边被切的鱼眼图像: 对角线180度
全景H5制作操作文档_第3张图片
|Nikon单反相机Nikon 10.5mm镜头|横向拍摄
|拍摄水平一圈四张或者加天地两张鱼眼图像,用(Fullframe4+X)模式拼合:
全景H5制作操作文档_第4张图片

|拍摄较为复杂 图像清晰

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

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

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

下载软件Pano2VR

全景H5制作操作文档_第7张图片

全景H5制作操作文档_第8张图片
Pano2VR界面

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

全景H5制作操作文档_第9张图片
全景H5制作操作文档_第10张图片

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

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

至此,实现本地端H5演示效果。(可放大缩小,左右移动)

全景H5制作操作文档_第11张图片

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

方式一:微盟

全景H5制作操作文档_第12张图片
微盟界面

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

方式二:全景通

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

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

全景H5制作操作文档_第13张图片
1.jpg

然后填写标题并点击确定。
全景H5制作操作文档_第14张图片
2.jpg


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

全景H5制作操作文档_第15张图片
3.jpg

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

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

4.jpg

然后点击“添加新场景”。
全景H5制作操作文档_第16张图片
5.jpg

则变成这个样子
全景H5制作操作文档_第17张图片
6.jpg

然后点击下方的“确定”按钮。则添加成功。
全景H5制作操作文档_第18张图片
7.jpg

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

全景H5制作操作文档_第19张图片
8.jpg

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

9.jpg

看到修改界面,找到“光晕部分”,设置如图所示。
全景H5制作操作文档_第20张图片
10.jpg

开启开关,然后单击“点击获取”按钮获取光晕位置。
全景H5制作操作文档_第21张图片
11.jpg

当目标中心放到灯的位置,点击即可获取到此位置的数值。
最后,点击确定保存此次修改。

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

12.jpg

然后“添加新热点”
13.jpg

看到如下界面
全景H5制作操作文档_第22张图片
14.jpg

然后抓取热点位置
15.jpg

全景H5制作操作文档_第23张图片
16.jpg

转动到目标位置,然后点击白色箭头就可以获取到位置。
然后继续制作漫游事件
全景H5制作操作文档_第24张图片
17.jpg

全景H5制作操作文档_第25张图片
18.jpg

最后点击“确定提交”。
全景H5制作操作文档_第26张图片
19.jpg

点击返回上级
20.jpg

就可以看到我们添加热点的效果了。
然后我们用同样的方法将所有热点都添加上。

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

21.jpg

然后设置如图所示
全景H5制作操作文档_第27张图片
22.jpg

然后点击“确定”保存。

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

23.jpg

点击“添加UI元素”
全景H5制作操作文档_第28张图片
24.jpg

点击确定提交。
然后看到详细设置页面
全景H5制作操作文档_第29张图片
25.jpg

根据图片修改,然后点击保存,就添加完成了。
同样方法,添加LOGO和全景主持人。

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

26.jpg

然后修改背景音乐部分如图
全景H5制作操作文档_第30张图片
27.jpg

然后点击“确定”保存即可。

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

28.jpg

设置如图所示
全景H5制作操作文档_第31张图片
29.jpg

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


30.jpg

全景H5制作操作文档_第32张图片
31.jpg

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

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

全景H5制作操作文档_第33张图片
32.jpg

再次点击“开始生成”就真的开始生成了。最终会给出文件所在文件夹的路径
全景H5制作操作文档_第34张图片
33.jpg

结论

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

修订

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

你可能感兴趣的:(全景H5制作操作文档)