玩大了！ 阿里工程师的年会竟然这样搞？(3)

所以最后选择的是Three.js，想尝试下webgl2.0的小伙伴可以试下Babylon.js。

 

技术实现

介绍完技术引擎后，接下来将结合整体的功能流程，为大家解析下如何通过技术实现。

step1：让球体运动起来

这是动画展示效果的第一步。通过Three.js的基本方法，很容易实现在场景中添加对象的功能。如上图所示，在场景中添加了一个球体，并让它做顺时针的转动，而让球表面的图做逆时针的转动，并向场景中添加了不断向z轴负方向运动的星星，和做一定角度的公转运动的卫星。

三维坐标系中的点坐标x，y，z可以转换成了（上图）中的极坐标r，θ，φ（半径r和两个角度θ 和φ），同样可以用来表示点的位置（反过来也能推导）。

 

球面上的方片也是由对象构成。人员签到成功之后，方片上会变成照片，这里需要事先计算出方片相对于球面的位置以便生成方片。根据前期配置的到场人数n，从而让球面生成均匀分布的n个点，得到每个点的极坐标系位置，再转换成点坐标位置，这些位置就是方片位置。

 

step2：加入“微笑”展示效果

前端通过轮询定时请求后端接口，来拉取人脸识别数据，展示之后告诉后端已经展示过了。由于现场人脸识别后的“微笑”需要实时展示在主屏上，每场年会活动到场人数不等（约500-1500人），在这一状况下，如何保证在规定时间内完成人员入场与展示。我们的方案是：展示时间可以动态调节，人流量大时识别成功之后大屏就展示快一些，反之则展示慢一些。

 

因此，需要在前端维护了一个队列，用于存储识别成功但还未展示人员，轮询拉取的数据会进入到队列中，展示过的数据则会从队列中移除，一个展示动画的时长会根据队列的长度动态调节，取值范围2.5-5s不等。

 

step3：让“微笑”随球体一起运动

“微笑”展示后，还有个照片飞回球面并跟着球体一起运动的效果。因为牵涉到坐标系的相对运动（球面的位置是相对于父元素来实现的），这一效果较难实现。