伴随着移动设（shè）备的更新（xīn）换（huàn）代，H5开发技术也更加成熟（shú），让移动（dòng）端的（de）H5页面可以实现各种华丽的（de）视觉效（xiào）果（guǒ），即使是比（bǐ）较（jiào）消耗（hào）性（xìng）能（néng）的3D动画也能顺畅展现。下（xià）面，万象城在线登录和蓝橙互动就给大（dà）家分享一个3D全景（jǐng）动画H5案例。

案例：live the journey

品（pǐn）牌（pái）：Evian

1、创意定位

这是法国（guó）Evian为（wéi）依（yī）云矿泉水品牌进行宣传而推出的H5案例，通过扫（sǎo）描（miáo）限量版的瓶子，可以体验插画版的依云15年净化之旅，查（chá）看依（yī）云矿泉水产地，法国阿尔卑斯（sī）山的3D故事。

2、内容体验

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

3、设计策划（huá）

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

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