前言:
当前小伙伴们对“h5全景素材”可能比较讲究,看官们都想要了解一些“h5全景素材”的相关文章。那么小编同时在网摘上搜集了一些有关“h5全景素材””的相关知识,希望看官们能喜欢,姐妹们快快来学习一下吧!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太像了,为避免侵权不敢发出来给大家看。你自己试试吧?
标签: #h5全景素材