伴（bàn）随着移动设备（bèi）的更新换（huàn）代，H5开发技术也更加成熟（shú），让移动端的H5页面可以实现各（gè）种华丽的视觉效（xiào）果，即使是比较消耗性能（néng）的3D动画也能顺畅展（zhǎn）现。下面，乐鱼和蓝橙互动就给（gěi）大家分享一个3D全景动画H5案例。

案例：live the journey

品牌：Evian

1、创意定位

这（zhè）是法国Evian为依云矿泉（quán）水品牌进行宣传而推出的H5案例，通过（guò）扫描限量版的瓶子，可（kě）以体（tǐ）验插画版的依云15年净化之旅，查看依云（yún）矿泉水（shuǐ）产地，法国阿尔卑斯山的（de）3D故事。

2、内容体（tǐ）验

进入H5页面，首先是提示界面，提示调大（dà）声音，点击开始体验按钮（niǔ），进入主KV页面；主KV页（yè）面是以（yǐ）阿尔卑（bēi）斯山（shān）为背景，手机（jī）端时用户横（héng）向（xiàng）可以滑动屏幕，一共4个（gè）可以点击的按钮，3个蓝色和1个粉色（sè）按钮（niǔ）。粉色按钮进入的（de）是明信片页面，可以选择（zé）3种明信片图案（àn），写上接收人和发件人。蓝色的按（àn）钮，分别进（jìn）入（rù）3个不同关于阿尔卑斯山的3D动画，包括穿越森林、俯视阿尔卑斯山脉和（hé）穿越到地下查看（kàn）水源。点击其（qí）中（zhōng）一个蓝（lán）色按钮，长按浏览3D动画完毕，可以进入下（xià）一个动画。浏览动画的过程中（zhōng），可移（yí）动手机（jī）更（gèng）换视频角度，观看不同方向的风景，也可以松开按钮，停留观望（wàng）。3个3D动（dòng）画（huà）都观（guān）看（kàn）完毕后，会有观（guān）看完毕提醒，提示用户分享页面。

3、设计策（cè）划

3D渲染（rǎn），手绘画面；依云矿（kuàng）泉（quán）水的水（shuǐ）源地是阿（ā）尔（ěr）卑（bēi）斯山深处、冰川砂层天然过滤，所以（yǐ）构成元素阿尔卑斯山，深林等。

这个H5案例（lì）采用的是（shì）响应式页面，无论PC端还是移动（dòng）端都可以访问（wèn），通（tōng）过3D全景（jǐng）动画向用（yòng）户展示品牌故事和产品特点，相比（bǐ）于传统的视频类H5，3D全景动（dòng）画拥有更好的交互性，能时刻（kè）吸引用户注意力，提升营销（xiāo）效（xiào）果。