NO2-HTML5传播互动精选案例分享

一、上海市人民政府新闻办公室--全国首部城市形象VR展示

来源:720yun

  

创意特色:

通过webvr形象的展示一个城市的景象,给人高考俯瞰的感觉,甚是震撼啊。

实现剖析:

是一个由720yun生成的vr效果页面(720云全景VR社区,是一站式解决360度全景摄影、VR全景视频拍摄、VR空中全景航拍、3D虚拟现实制作,全景上传、分享、展示、漫游,以及创作者互动交流、VR供需交易的综合性社区平台),里面还可以实现不同场景切换,然后通过聚焦点触发交互,有现成的工具生成,难度降低不少,具体实现大家可以研究下720云。

扫描二维码体验:


二、史上最瞠目结舌的残酷对战,66天血战史

来源:网易游戏

  

创意特色:

比较常规的多场景的动画展示,结合声音和动画,能带来震撼的效果,有点flash片头的感觉。(不需要登录的,直接点击下面的围观大唐联赛就能看到效果)

实现剖析:

动画的节奏和声音结合是一个难点,里面的一些火焰什么的比较细腻,应该是逐帧实现的,因为限制微信打开,源码就不好扒了。

扫描二维码体验:

三、一看到《盗墓笔记》这个章节就着了魔!

来源:socialfishface

  

创意特色:

以电子书形式入场,各个场景点加入用户的交互,另外加上音乐,营造了几分恐怖。

实现剖析:

主要是通过逐帧实现,里面有个过桥的交互,结合陀螺仪挺好玩的,而且里面的小人动画也很细腻;然后到那个旋转的飞刀点金实现感觉有点难度(具体实现要各位自己看源码哈);后面那个棺材提示长按然后吹气,其实吹气是假的。

扫描二维码体验:

四、34款网易游戏齐贺520游戏热爱日!

来源:网易游戏

  

创意特色:

通过动画互动,突出礼包传送的整个效果并增强了520这个主题。

实现剖析:

主要动画都是通过逐帧实现的,动画细腻度不错,借助egret框架和tween框架实现的,背景音乐和动作生效同时存在也是个难点

扫描二维码体验:

五、网易VR故事|“不要惊慌,没有辐射!”

来源:网易

  

创意特色:

通过一个webvr视频还原热点事件新闻,vr的沉浸感加上声音让人有点来到现场的感觉,效果很赞

实现剖析:

整个项目的重点在于vr视频,所以素材是一个实现难点,通过源码发现原来视频制作是通过720yun的,也就是本分享的第一个例子,自然难度又降低了不少。当然里面不止是播放个视频这么简单,vr里面也是带有交互的,在那个摩天轮场景,需要用户通过控制聚焦点到某个点才能进行交互的,具体可以拿vr眼镜体验下。至于vr实现自然也是依赖THREE.js。

扫描二维码体验:


(如果您有精彩的HTML5传播互动分享,也可以联系我喔~)



本文由 w3cmark_前端笔记 版权所有,转载时请注明出处。
注明出处格式:w3cmark (http://www.w3cmark.com/2016/504.html)

分享到:

关注w3cmark
微信公众号 w3cmark_com