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

案例：live the journey

品牌：Evian

1、创意定（dìng）位

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

2、内容体验

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

3、设计策（cè）划

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

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