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

案例（lì）：live the journey

品牌：Evian

1、创意定位

这（zhè）是法国Evian为依云（yún）矿泉水品牌进（jìn）行宣传（chuán）而推出的H5案（àn）例，通过扫描（miáo）限量版的瓶（píng）子，可以体验插画（huà）版的（de）依云15年净化之旅（lǚ），查看（kàn）依云矿泉水产地，法（fǎ）国阿尔卑斯山的3D故事。

2、内容（róng）体验

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

3、设计策划

3D渲染，手绘画面（miàn）；依云矿泉水（shuǐ）的（de）水（shuǐ）源地是阿尔卑斯山（shān）深处、冰川砂层天然过滤，所（suǒ）以构成元素（sù）阿（ā）尔卑斯山，深林等。

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