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

案例（lì）：live the journey

品牌：Evian

1、创意定位

这是法国Evian为依云矿泉水（shuǐ）品牌（pái）进行（háng）宣传而（ér）推（tuī）出的H5案例，通过扫描限量版的瓶子，可以体（tǐ）验插画版的依云15年（nián）净化之旅（lǚ），查看依（yī）云矿泉水（shuǐ）产地，法国（guó）阿尔卑斯山的3D故事。

2、内容体验

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

3、设计策划

3D渲染，手（shǒu）绘画面；依云矿（kuàng）泉水的水源地（dì）是阿尔卑斯（sī）山（shān）深处、冰川（chuān）砂层天然（rán）过（guò）滤（lǜ），所以构成元（yuán）素阿尔卑斯山，深林等。

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