用技术来分类H5

全景 英文名(Panorama），又被称为3D实景，分为虚拟现实和3D实景两种。虚拟现实是利用软件，制作出来的模拟现实的场景；3D实景是利用单反相机或街景车拍摄实景照片。

通过three.js、软件或其他WebGL技术来进行建模渲染，然后生成轻量化的html文件；并将画面和声音全方面记录场景，使得用户有种身临其境的感觉。

制作的图片素材和拼接的方式有一定的联系。

具体可参考下面的链接：

关于全景成像的理论和拍摄手法拼接等：

http://www.krpano360.com/3d/

拍摄和后期处理教程：

https://bbs2.720yun.com/category/2

制作全景/VR H5的几种实现方案的比较：

https://www.cnblogs.com/ifannie/p/9917490.html

参考案例-长安汽车

-

长安汽车，睿骋CC—3D数字展厅

采用全景模拟的技术，太空为背景，整体体验起来唯美有趣。与产品完美融合，很容易让用户产生购买欲望。

长安汽车

体验地址：

全景/VR 案例-2016年天猫造物节

-

最早经典全景/VR类H5代表作为2016年天猫双11的宇宙邀请函，整体的画面立体感强，滑动拖拽可控制环视方向，并且将VR全景与一镜到底技术相结合，令作品的空间感更凸显，让人产生强烈的时空穿梭感。

天猫造物节

题外话

-

一镜到底原本是影视作品上的一种手法，是指拍摄中没有cut情况。

运用一定技巧将作品一次性拍摄完成，全球票房榜榜首的巨作《阿凡达》就是利用VR全景技术制作的。

阿凡达

最早运用到一镜到底的H5大作要数网易出品的《2015娱乐圈画传》。

娱乐圈画传

体验地址：

一镜到底H5通过模仿镜头的运动，进行画面的延伸开展，配合用户第一视角，进行视觉上的拓宽，让用户随着画面的移动推进情节的发展，代入感强，或采用长按按钮达到一气呵成的画面效果，吸引用户眼球的同时又能够强力黏住用户。

3D 英文“3 Dimensions”的简称，中文是指三维、三个维度、三个坐标，即有长、宽、高。换句话说，就是立体的，3D就是空间的概念也就是由X、Y、Z三个轴组成的空间，是相对于只有长和宽的平面（2D）而言。

一直以来互联网以2D的模式，但随着3D技术不断发展和4G网络的便捷以及即将5G时代的到来，用户可透过3D技术了解商品全面、详实、逼真的更多信息。

3D的html5主流实现技术是three.js，是一款 webGL引擎， 封装了 webGL 底层的 API ，提供了高级的开发接口，可以使用简单的代码去实现 3D 渲染，偏向动画。

原生的web3D引擎有：

1.Babylon.js一款强大的3D游戏引擎；

2. SceneJS一个开源的 JavaScript 3D 引擎适合高精度细节的模型需求如工程学和医学上；

3.PhiloGL增加了额外的功能帮助你可以使用本地的 WebGL。

参考链接：

https://www.jianshu.com/p/111250fee95e

参考案例-小赢科技5周年

-

小赢科技5周年时出品的品牌宣传H5《测试你的小赢DNA》

体验地址：

3D技术文章：

1. 基于 Threejs 的 web 3D 开发入门

https://www.jianshu.com/p/7ccf43f912bc

2. 知乎：HTML5游戏引擎深度测评https://www.h5anli.com/articles/201903/yxyqsdcp.html

重力感应，基本上是平板电脑和智能手机的标准配置，起到的作用也很简单，比如你玩赛车游戏，控制左右转弯，屏幕横屏和竖屏切换，都需要用到重力感应模块。

而陀螺仪，又叫角速度传感器，用于测量物理量的偏转、倾斜时的动作角速度。可以精确的分析判断出使用者的实际动作，通过他收集的这些动作给手机下达一些指令。

重力感应的H5基本通过以上两个配置来实现功能。

参考案例-QQ浏览器+电影《影》

-

影

体验地址：

重力感应相关文章：

https://www.h5anli.com/articles/201609/devicemotioneventone.html

通过h5页面插入视频，控制视频播放速度，并且切换视频与H5的不同界面，来实现炫酷的视觉效果。

参考案例-QQ比心接力

-

《刘亦菲和你一起爱心接力啦》

一款公益性的H5，色调温和暖心，画面内容逐层递进，勾起人好奇心的同时，很难使人不为之动容

QQ比心接力

体验地址：

另外

-

在国内电影和网络剧大热的当下，互动电影类H5也越来越多，互动剧给用户一个完整的故事，让用户对内容产生更深入的情感体验；看剧成冒险，让观看者进入故事里面。

2018年真人互动电影《黑镜：潘达斯奈基》

2019年《古董局中局之佛头起源》

《记忆重构》手游

一款悬疑类真人密室逃脱电影手游

《活口》原班人马打造、《七宗罪》的现代版、未来5G行业布局和2019最精良互动电影等等，这些都是这支H5的标签

体验地址：

1. 滑动交互

H5中最常见的交互方式，主要作用是转场，比较常见的操作，观看者流失率比较低

网易《心灵复苏大保健》

体验地址：

但因为这类交互方式单一，所以，行业中有一个5-8页最佳滑页数上线的说法。

其实，同样的滑页转场，如果能够有不同的转场花样，就能弥补呆板，

2. 连续滑动交互

网易出品的《饲养手册》被赞誉是让人意外的交互体验，连贯的测试题，新奇的体验交互+口语化的情景文案+萌萌的美术设计，让这支H5好评如潮。

网易《饲养手册》

体验地址（需用手机浏览器）：

https://wp.m.163.com/163/html/news/2019_feed/index.html

3. 长按交互

长时间按压屏幕，来达到内容播放和转场的互动方式，有提升注意力的效果。

在长按时，最好能够有相关进度参数，像是《1分钟漫游珠港澳大桥》中的公里数显示。

网易《1分钟漫游港珠澳大桥》

体验地址：

日新月异的技术升级为我们带来无限的可能，我们应当不停的探索未来，也许某一天爆款就出自你手。