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

案例：live the journey

品（pǐn）牌：Evian

1、创意（yì）定位（wèi）

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

2、内容体（tǐ）验

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

3、设计（jì）策划

3D渲染，手绘画面；依云矿泉水的（de）水源地是阿尔（ěr）卑斯山深处、冰川砂层天（tiān）然过滤，所以（yǐ）构（gòu）成元素阿尔卑斯山，深林等。

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