用户投稿
要制作一个淘宝720°VR全景H5，您需要遵循以下步骤，大约需要30分钟的时间。以下是详细的攻略：
### 准备工作
1. "素材准备"：确保您有高质量的图片或视频素材，用于制作全景内容。
2. "工具准备"：您需要一个全景图片制作工具，如Photoshop、H5制作平台（如易企秀、MAKA等）。
### 步骤一：制作全景图片
1. "合成全景图片"：使用Photoshop或其他全景制作软件，将多张图片拼接成一张全景图片。
2. "调整图片"：确保全景图片的视角正确，没有扭曲或黑边。
### 步骤二：上传全景图片
1. "选择H5制作平台"：登录您选择的H5制作平台。
2. "新建项目"：创建一个新的H5项目。
### 步骤三：添加全景功能
1. "选择全景模块"：在H5制作平台的模板库中，找到并选择一个全景展示模块。
2. "上传全景图片"：将制作好的全景图片上传到平台。
### 步骤四：设置全景展示
1. "调整大小"：根据需要调整全景图片的显示大小。
2. "设置旋转角度"：设置全景图片的旋转角度，使其能够360°旋转。
### 步骤五：添加互动元素
1. "添加热点
相关内容：
2016年7月中旬：
——这阵子淘宝H5很火，朋友圈被刷了好几天屏。这不是一般的720度全景，它有伪3D的VR效果！你能上下、左右滑动看到不同视角的画面，还能玩重力感应。对了那些动漫人物，动起来是分前后的！听说淘宝请外包团队，花了30万。
——哦？以后不用了。
▲淘宝H5原版
2个礼拜后：
7月28日上午，iH5.cn主页悄悄更新系统消息：“全景功能上线，可制作720VR浏览效果”。一下放出3个全景组件，720度VR、重力感应、页面交互，各种功能1个不落！（在此感谢原作者Shrek公开了核心源码）
你是说我们不花一分钱能做出淘宝的H5？
这是真的，我已经把这个H5做出来了：
▲淘宝H5致敬版
相似度：95%
你也要玩玩吗？过程简单得可怕，只有3步——
（1）准备全景素材
▲淘宝H5的图片
A、1张首尾相连的全景图，当背景；
B、堆叠在全景图上的人或物件的PNG图，当前景。
为方便演示，这里直接扒淘宝造物节80张切好的图，拼合成不同的层。上面半透明的背景是20张切片合成的，前景大概照着淘宝H5的位置放，共分成3层（NO.1最靠前）。
（2）用Photoshop切图
A、把不同层的图片各竖切成N份，然后导出；
B、导出时，越靠后层的图片宽度（W）要越大。
不会切图劳烦百度，我这里把1张背景、3张前景分别切20块导出为PNG。切的份数越多，三维效果就越平滑，但图片也会随着变大容易卡。
（3）用iH5做全景运动
▲用iH5设置交互
A、新建全景容器，下面放4个全景背景组；
B、把切好的分层切片分别拖到对应的全景背景组里。
比如你要放背景层图片，就保持全景背景组1选中，把20张切片拖到页面里就行。见证奇迹的时刻到了！以下几张图比较高能，是拖好图调试的效果，强烈建议有WIFI的人点开：
▲用iH5分别调试水平转角、垂直仰角、观察点大小的效果
看完上面图片你应该也懂了，每个全景组就是把切片按顺序围成圆柱。
那刚才给前后层图片设不一样的宽度，用处是？宽度越小，围成圆的周长就越小，当观察点在圆的中心，就会感觉这一层离得越近、移动得越快——VR的立体效果就这么来的。
半径=周长/2π，相减可推测不同层的间距，并判断观察点的合适位置。
如果你对点击弹出华晨宇的新歌介绍、H5上方飘着一个造物节LOGO、滑动页面画面会伸缩什么的感兴趣，直接去官网找教学视频吧。
加全景和调试其实很快，30分钟不到，主要时间都花在处理淘宝那些素材了……扒人家原图重新拼合构图再切开很费事啊，还是原创好。
因为模仿出来的H5太像了，为避免侵权不敢发出来给大家看。你自己试试吧？
微信扫一扫打赏
支付宝扫一扫打赏
