网易新闻：龙猫线上扭蛋机今日营业！

2018-08-13 H5案例分享 H5案例分享

案例演示，请长按/扫描以下二维码 ->

识别图中二维码

龙猫线上扭蛋机今日营业！-查阅二维码

完整欣赏此案例大约需要45秒

案例：龙猫线上扭蛋机今日营业！

出品：网易新闻

亮点：

创意定位，以纪念龙猫30周年，龙猫送你礼物为创意点，让用户参与“龙猫线上扭蛋机”活动，点击扭蛋机可以生成各种日本动画卡通人物玩偶3D形象，最后生成一张海报，形成分享和回流。
策划逻辑，大致分四个步骤：① 视频动画，20秒勾起用户对龙猫的回忆；② 参与扭蛋机活动，点击金币，旋转开关，点击金蛋，会出现一个卡通玩偶3D形象，用户可以旋转观玩偶形象，画面底部有3个按钮：再玩一次、拍照、收藏的玩具；③ 点击拍照图标，会以当前卡通玩偶效果合成一张海报，带人物台词及品牌、回流二维码；④ 点击“收藏的玩具”，会显示用户已经收藏的卡通玩偶形象。
技术分析，其中3D部分用到了ThreeJS框架，海报部分用了画布合成框架html2canvas，交互手势部分则用到了很小的手势库AlloyFinger。
体验上，看到龙猫，想到的不是动画片，而是自己的青春。想想龙猫都30岁了，看龙猫的小朋友们，是不是也都成为了大朋友。

技术实现： Zepto+AlloyFinger+html2canvas+ThreeJS

以上为“H5案例分享”团队原创文章，转载请注明出处！

标签