ThreeJS碎片特效公益H5——保护动物，我在行动
Posted H5案例分享
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ThreeJS碎片特效公益H5——保护动物，我在行动相关的知识，希望对你有一定的参考价值。
案例：保护动物，我在行动
出品：长隆旅游
亮点：
策划上，动画类。载入完毕，点击开始传递进入动画展示部分，先后展示大熊猫、白虎等濒危珍稀动物，展示方式是碎片动画+陀螺仪，每个小动物都是很多个三角形碎片拼成，展示后会变成碎片散开，并出现介绍该动物的文字，接着在展示下个动物的时候碎片又会拼在一起，过程中还可以转动手机以陀螺仪的形式查看。展示完毕会总结长隆对保护动物贡献的力量，并在最后号召更多人一起热爱、保护动物。结尾页用户可以点击“成为志愿者”跳转外链，也可以“再看一遍”，或“分享给好友”，成为下一个传递者。
设计上，黑色铺底，白色字体，能突出内容又能体现话题的严肃性。碎片会根据动物的切换而变换颜色。碎片动画和文字进入、离开都以3D的形式展现。音乐选用了很多国外大片预告里都会采用的背景音乐——Guardians at the gate，风格豪迈壮阔，与使命感的主题非常搭。
体验上，可能是因为three.js本身对手机的压力就很大，所以如果手机性能稍微差点，观看它的时候流畅度就不会很好，第二遍进入会好些。小编觉得性能优化上也许可以更好。抛开这些，整体动画效果还是蛮炫酷的。
技术实现： Three.js + tween.js + jQuery
长按/扫描下面的二维码
保护动物 我在行动
小五呼吁大家
请爱护珍稀动物
它们和小五一样可爱
一样需要被呵护
...
以上为【H5案例分享】团队原创文章！
转载请务必注明出处！
【公益】相关H5案例推荐：
找优秀H5案例上 h5-share.com
以上是关于ThreeJS碎片特效公益H5——保护动物，我在行动的主要内容，如果未能解决你的问题，请参考以下文章