伴随着移（yí）动（dòng）设备的更新换代，H5开（kāi）发（fā）技术也更加成熟，让（ràng）移动端的H5页面（miàn）可以实现各种华丽（lì）的视觉效果（guǒ），即使是（shì）比较消耗性能的3D动画也能顺畅展（zhǎn）现。下面（miàn），蓝（lán）橙互（hù）动就给大家分享一个3D全（quán）景（jǐng）动画H5案例。

案例：live the journey

品牌（pái）：Evian

1、创意定位

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

2、内容体验（yàn）

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

3、设计策划

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

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