伴随着移动设备的更（gèng）新换（huàn）代，H5开发技术（shù）也更加（jiā）成熟，让移动端的H5页（yè）面可以实（shí）现各种华（huá）丽的视（shì）觉效果，即使（shǐ）是比较消耗性能的3D动（dòng）画也能顺畅展现。下面（miàn），欧宝网官方站入口和蓝橙互（hù）动（dòng）就给大（dà）家分（fèn）享一个（gè）3D全景动画H5案例。

案例：live the journey

品牌：Evian

1、创意定位

这是法国Evian为依云（yún）矿泉水品牌进行（háng）宣传而推出的H5案例，通过扫（sǎo）描限量版的瓶子，可以（yǐ）体验插画版的依云15年（nián）净化之旅（lǚ），查（chá）看（kàn）依（yī）云矿泉（quán）水产地，法国阿尔卑斯山的3D故（gù）事。

2、内容体验（yàn）

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

3、设计（jì）策划

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

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