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

案（àn）例：live the journey

品（pǐn）牌：Evian

1、创意定位

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

2、内容体验

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

3、设计策划

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

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