伴随着移动设备的更（gèng）新换代，H5开发技术也更（gèng）加成熟（shú），让移动端的H5页（yè）面可（kě）以实现各种华丽的视觉效果，即使是比较消耗性能（néng）的3D动画也能顺畅（chàng）展（zhǎn）现。下面（miàn），新利和蓝橙互动（dòng）就给大家分（fèn）享（xiǎng）一个3D全景动（dòng）画H5案例。

案例：live the journey

品牌（pái）：Evian

1、创（chuàng）意定位

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

2、内容体验（yàn）

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

3、设计策划（huá）

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

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