H5打造3d场景不彻底攻略（一）: H5 3d表现形式

前言

日前，taobao造物节H5放肆地火了一把。相信接下来将3d嵌入网站的这种营销方式会被愈来愈多的人留意到。
工做之余体验了若干个3d H5页面，感受这类的H5互动体验性明显要比普通的要强，把二维的物体转化成三维，能给人一种置身其中的感受。因此，一个好的idea加上低成本的技术实现——将3d融入H5从此也许还会爆发出更大的能量。

3D在H5中的表现形式

话很少说，直接贴几个连接你们体验一下。

全景

一、场景全景
这里选了三个比较有表明性的全景H5。

淘宝造物节

做为近来最HIT的一个H5，其实从技术上来不难实现，最大的卖点就是创意了。进场动画是一连串的背景画布旋转变换迅速飘入视线，试感觉下就能体会到这是很棒的视觉盛宴。固然也跟精致的插画设计分不开。

---

QQ物联星球计划

全景技术是基于Three.js，建立天空盒子并进行贴图实现的，但因为内容比较少，而且对代码进行了压缩，因此体验起来仍是很流畅的。因为背景使用了星空图，因此从视觉上来讲图与图之间拥有较高的贴合度。

---

微物质

因为历时比较长，这里就不放动图了，你们本身去网址体验一下吧。

做为一个叙事性的H5，它的场景和动效所有基于代码实现，而抛弃了视频这种方式。这给移动端用户带来了加载性能上的显著提高。但它与用户的交互比较少，于是并不能直观体现出这是彻底基于代码实现的。而且节奏平缓，没什么波澜，配乐略显哀沉，让人很难彻底体验完这个长达5分钟的H5。还不如看一个有趣的视频。若是能将它融入更多的交互和起伏有序的情节必定能给这个H5增色不少。

二、物品全景
这个比较好理解，就是咱们能够经过手势触摸物品，观看到物品各个面的样式。可是这种应用场景较为局限，通常为某个特定品牌物体展现时才比较适合。
效果可在本文最后的“胜势全开”例子中体验。

视差

比较常见的是页面滚动时的视差。然而使用3D变换中的rotate和translate属性实现的视差，能更大化地体现出3D效果。实现起来是很是简单的，只要将图片中小元素分离出来，而后让他们以不一样的值旋转移动（注意值不能相差太大，有细微飘动的感受就能够了）从视觉上便能感受这些小元素是层叠在一块儿，动态模拟出不一样视角的显示效果不一样。

看一个例子

Apple TV海报背景视觉差特效

3D变换

胜势全开

这个H5也是只作造物节那个团队作的，技术选型依然是js+css3d，一样是使用了他们团队封装的css-engin这个轻量级类库。这是他们较为早期的做品。不难发现，这个团队对css3d的运用很是的纯属。
从这个H5来讲，刚进入画面就有物体冲入视线的感受，而且不断地运用360°旋转和镜头的拉伸缩放感对视觉形成冲击。很好地为咱们诠释了，以css3 3d变换打造H5 3d亦不是为一种明智的低成本的实现方式。

H5中3d的表现形式就先谈到这里了，接下来我会从技术实现的角度聊聊这些有趣的H5究竟是怎么实现的。