VR三维全景做的人多么的H5是怎么做的

来源：蜘蛛抓取(WebSpider) 时间：2017-10-19 02:16 标签： 全景地图怎么做的
——听说淘宝请人做那个H5，花了30万。——哦？我刚做出来了。
——前阵子淘宝H5很火，朋友圈被刷了好几天屏。
——我知道，是造物节的《ZAO》！它不是一般的720度全景，有伪3D的VR效果。你能上下、左右滑动看到不同视角的画面，还能玩重力感应。对了那些动漫人物，动起来是分前后的。听说淘宝请外包团队，花了30万。
——哦？我刚做出一个这样的H5。
——Seriously？！
这是真的，我已经把这个H5做出来了。
▲淘宝造物节H5原版
▲我做的致敬版H5
相似度：95%
事情来由是这样的，前两天H5制作工具iH5一下子放出3个全景组件，720度VR、重力感应、页面交互，各种功能1个不落。于是我就屁颠屁颠扒了淘宝造物节H5的素材开始做，结果竟然给我捣弄出来了……动态效果如下：
▲720度VR的效果图
你也要玩玩吗？过程简单得可怕，只有3步——
（1）准备全景素材
▲淘宝造物节H5的图片素材
A、1张首尾相连的全景图，当背景；
B、堆叠在全景图上的人或物件的PNG图，当前景。
为方便演示，这里直接扒淘宝造物节80张切好的图，拼合成不同的层。上面半透明的背景是20张切片合成的，前景大概照着淘宝H5的位置放，共分成3层（NO.1最靠前）。
（2）用Photoshop切图
▲用Photoshop处理素材
A、把不同层的图片各竖切成N份，然后导出；
B、导出时，越靠后层的图片宽度（W）要越大。
不会切图劳烦百度，我这里把1张背景、3张前景分别切20块导出为PNG——需要注意，切的时候要保证同层图片高度一致，这样导出的素材才有效！另外，切的份数越多，三维效果就越平滑，但图片也会随着变大容易卡。
（3）用iH5做全景运动
▲后台的交互设计界面
A、新建全景容器，下面放4个全景背景组；
B、把切好的分层切片分别拖到对应的全景背景组里。
比如你要放背景层图片，就保持全景背景组1选中，把20张切片拖到页面里就行。见证奇迹的时刻到了！以下几张图比较高能，是拖好图调试的效果，强烈建议仔细观赏：
▲分别调试水平转角、垂直仰角、观察点大小的效果
看完上面图片你应该也懂了，每个全景组就是把切片按顺序围成圆柱。
那刚才给前后层图片设不一样的宽度，用处是？宽度越小，围成圆的周长就越小，当观察点在圆的中心，就会感觉这一层离得越近、移动得越快——VR的立体效果就这么来的。
[注]&半径=周长/2π，相减可推测不同层的间距，并判断观察点的合适位置。
加全景和调试其实很快，30分钟不到，主要时间都花在处理淘宝那些素材了……扒人家原图重新拼合构图再切开很费事啊，还是原创好。如果你对点击弹出华晨宇的新歌介绍、H5上方飘着一个造物节LOGO、滑动页面画面会伸缩什么的感兴趣，直接去官网找教学视频吧。
因为模仿出来的H5太像了，怕侵权不敢发出来给大家看。我相信你可以的，自己试试吧……
可以记录推荐数据哦！
收录收藏夹
添加到收藏
没有新消息
创建收藏夹
公开(受欢迎的收藏夹将有可能选入站酷精选)
私密(仅自己可见)
下次自动登录
没收到验证码?
下次自动登录
第三方帐号登录
微信二维码登录您当前的位置：　&　采编动态
VR、H5、图解新闻让“全景两会”动起来
来源：海南日报
海南日报新媒体开启报道新模式
VR视频全景看两会
民生红包，快来领！
大数据读懂政府工作报告
　　■ 海报集团全媒体中心记者 李萌
站在省人大会堂，身居省两会代表委员中，360°观看会议精彩瞬间，是一种什么样的体验？这个问题，海南日报新媒体的广大用户可以亲身体验。
　　今年海南省两会，海南日报新媒体使用包括最新的VR全景、H5微场景、动画图解等新技术新手段，创新新闻产品，同时利用海南日报客户端、微信公众号、官方微博等平台全方位立体报道，提供给用户身临其境的两会新闻体验。
　　VR设备上会
　　读者可全景看两会
　　今年省两会，海南日报新媒体率先利用360°VR全景虚拟现实技术，全方位拍摄和展示省两会现场，让读者获得崭新的自由观看体验。推出的VR视频：360°沉浸式体验省五届人大五次会议开幕现场，画面可以拉近、推远，俯仰视角的变换流畅无比。
　　网友只需要点开链接轻触手机屏幕，就可以瞬间置身于省人大会堂会议现场，通过手机角度的变换，仿佛“走”进现场，代表委员们就好像就坐在自己身边，身临其境地观察两会现场的精彩瞬间。
　　创新运用H5
　　拆省长民生“红包”
　　2月20日，一条“省长刘赐贵发民生红包了，快来领！”消息在微信朋友圈里广泛转发，并受到网友们的热情点赞。这条消息正是由海南日报客户端创新运用H5技术制作的动态页面，以网络上最为常见的“拆红包”形式，对刘赐贵在省五届人大五次会议上作的政府工作报告中有关民生方面的内容，进行轻松有趣的解读。
　　页面中，省长以漫画人物的形象出现，手拿红包笑容可掬，生动的形象让广大网友倍感亲切。只要点击页面中省长手中的红包，页面就会跳转出6个民生“红包”，轻松了解今年海南将在教育、医疗、就业、住房、养老、交通等方面的民生福祉。
　　图表结合
　　大数据读懂政府工作报告
　　政府工作报告中提出的各项指标预期，不仅是全省的发展目标，更是关乎你我的福祉。如何从数字角度快速读懂政府工作报告呢？
　　海南日报客户端利用H5技术推出的“大数据读懂海南省政府工作报告”，由大家的虚拟小伙伴“海端君”带领用户读报告，一改一贯的严肃文风，将枯燥的数据，通过图表、漫画、交互式页面的改造，让阅读体验变得生动鲜活起来。
　　海南日报新媒体还设立“两会好声音”栏目，在会场内外，由记者就热点话题邀请人大代表、政协委员谈心声，并与读者网友面对面对话等，将两会的精神及时充分地传递给读者，在代表委员与市民之间搭建一座沟通互动桥梁。
　　另外，早在省两会召开之前，海南日报微信公众号和客户端就开启了“我为两会捎句话”征集民意，并通过记者走上街头采访市民，在省两会前推出3分钟短视频《我对2017海南两会有话说》视频节目。
　　随着省两会的进行，海南日报新媒体还将制作融特刊，围绕海南供给侧结构性改革、脱贫攻坚、全域旅游、农垦改革、海洋经济、互联网＋等热点话题，融合文图视频图表H5等多种形式，推出系列融特刊深度报道；对两会上代表和委员们提出的热点话题，推出系列两会微信朋友圈特别报道；运用三维立体动画形式解读两会内容。
　　（本报海口2月20日讯）
编辑：呼叫中心
海南日报报业集团新闻信息中心制作维护
南海网技术支持
地址：海南省海口市金盘路30号新闻大厦主题信息（必填）
主题描述（最多限制在50个字符）
申请人信息（必填）
申请信息已提交审核，请注意查收邮件，我们会尽快给您反馈。
如有疑问，请联系
CSDN &《程序员》编辑/记者，投稿&纠错等事宜请致邮
你只管努力，剩下的交给时光！
如今的编程是一场程序员和上帝的竞赛，程序员要开发出更大更好、傻瓜都会用到软件。而上帝在努力创造出更大更傻的傻瓜。目前为止，上帝是赢的。个人网站：。个人QQ群：、
个人大数据技术博客：休闲娱乐生活服务其他类别
热门新闻更多
实时热点榜单热门视频发现好货
阅读下一篇视频推荐当前位置：>>>正文
VR视频是怎么制作的？先了解四个步骤基础
除了游戏之外，视频也是VR技术主要的应用方向之一，当通过头显看到眼前的立体影像，相信不少人会好奇，VR视频是怎么制作的？而今天小编就要告诉大家，实际上制作VR视频并非难事。
1、首先你需要有一台全景摄像机
VR视频是360度全方位拍摄，所以需要一台四方位或者全方位摄影机，配备多方向摄像头，比如Google YI JUMP VR 摄像机、Jaunt ONE VR 摄像机、Nokia OZO 全景相机等。由于摄像机镜头是定焦的，没有传统电影中的特写镜头和走步移位，所以一定要事先设定好摄像机的移动轨迹，这是决定能否拍出质量好的VR视频的基础。
2、其次需要准备一个拍摄环境
为了提供更真实的拍摄环境，摄像头所及的环境不能出现与视频无关的人或者事物，甚至是导演也要远离拍摄现场或者进行适当的伪装以免穿帮，所以视频拍摄布景很重要。当然也不是所有的封闭环境都适合拍VR视频，只有那些代入感极强的背景才会给VR用户带来沉浸感，才会显现出VR视频的美妙，比如星球大战》和《盗梦空间》这样的电影背景就十分适合VR视频拍摄。
3、VR视频后期制作
由于VR视频的制作拼接影响视频的观感，所以拍摄前一定要事先做好彩排，拍摄的时候最好一次通过。另外就是消费者观看时会自己主动找场景，所以在视频制作中要设置一些场景引导交互或者视频制作后期在正在说话的人物旁边加字幕，正确引导观众跟进剧情发展。
4、视频输出及测试
在叠加完虚拟效果之后，输出SDI或HDMI信号，经过编转码处理再将视频上传到直播平台,目前我们的已经可以支持H5页面的直播，这样用户随时随地，即可通过直播链接，&进入&直播现场，感受Live体验。
不过值得注意的是，上述步骤虽然看起来简单，但整个过程需要注意到方方面面的细节才能完成，如果你不是一名专业人士，即便拥有器材也无济于事。
相关阅读：
更多VR基础知识，尽在！
VR交流群：

我要回帖

更多关于 全景地图怎么做的 的文章

 

随机推荐