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

案（àn）例：live the journey

品牌：Evian

1、创意定位

这（zhè）是法国Evian为依云矿泉水品牌进行宣传而推出的H5案例，通过（guò）扫描限（xiàn）量版的瓶子，可以体验插画版的依云15年净化之旅，查看依云矿泉水产地（dì），法国阿尔卑（bēi）斯山的3D故（gù）事。

2、内容体验

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

3、设计策划（huá）

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

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