滴滴圣诞全景活动Krpano交互实现

滴滴的圣诞全景活动,是个挺有意思的项目。你可以理解为节日版的沉浸式 H5,点进去就是一个 360 度环绕的圣诞场景,交互元素也不少,比如点击雪人领券、点礼物开小游戏啥的。技术上用的是Krpano,一个老牌全景方案,配置灵活、兼容好,用XML就能搞定大部分交互,适合想快速上线效果的你。

全景图怎么来?你可以用专业相机拍,也可以自己多角度拼图,再用工具拼接成一张大图。交给 Krpano 做热点、加动画、放音乐都行,连360 度视频它都支持,适配移动端也挺靠谱。

这套活动还跟支付宝联动过,像是用户扫码进场、授权领奖之类的场景也考虑到了,服务端也配合得比较完善。要是你在做品牌活动或者节日专题页,可以参考这个玩法,氛围感拉满还挺吸引眼球的。

不过用 Krpano 有几个点要注意:热点配置建议别太密集,不然加载慢;适配方案要测试清楚,不同机型差异还挺大的;还有就是交互事件尽量放在前端,后端只管数据逻辑,这样响应也快。

如果你最近刚好想做全景类 H5,可以看看它当时的活动效果,还挺值得借鉴的。你可以从这篇文章里找到更多灵感:圣诞节互动网页资源详解

zip
2016-12-25alipay.zip 预估大小:28个文件
folder
2016-12-25alipay 文件夹
folder
vr 文件夹
file
gyroicon.png 3KB
file
tour.js 141KB
file
shengdan.mp3 450KB
folder
skin 文件夹
file
500-1.png 235KB
folder
plugins 文件夹
file
gyro2.js 12KB
file
soundinterface.js 3KB
file
bg.png 13KB
file
index.html 2KB
file
heka.png 142KB
file
guanbi.png 6KB
file
info-pop.png 221KB
file
open-pop.png 171KB
file
gift-pop.png 61KB
file
tour.xml 6KB
file
hongbao-pop.png 94KB
folder
panos 文件夹
folder
VR600k.tiles 文件夹
file
preview.jpg 79KB
file
pano_l.jpg 135KB
file
pano_u.jpg 99KB
file
pano_b.jpg 114KB
file
pano_d.jpg 245KB
folder
mobile 文件夹
file
pano_l.jpg 245KB
file
pano_u.jpg 184KB
file
pano_b.jpg 208KB
file
pano_d.jpg 435KB
file
pano_f.jpg 200KB
file
pano_r.jpg 282KB
file
pano_f.jpg 110KB
file
pano_r.jpg 157KB
zip 文件大小:3.9MB