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

通过step1，可以计算出方片的位置position(position是个三维向量：xyz)，因为位置是相对球体的，所以从球体看来方片的位置永远是xyz，而在全局看来，方片的位置是永远在变化的，而这个位置坐标怎么获取是一个问题。 [转载出处：www.11jj.com]

[转载出处：www.11jj.com]

当时，小伙伴们想到了两种方案：

第一种：让照片相对球体运动，这样就不用去考虑方片位置了，因为这个位置是不变的。但这样的弊端是，因为球体在运动，照片也需要一直运动。如果要达到视觉上看“照片不动”的效果，就需要照片永远对着摄像头。

第二种：让照片相对全局运动，在每一帧的时候去获取方片相对于全局的坐标。然后在这一帧内慢慢趋近于这个坐标，最后实现位置的重叠。

经过讨论，决定采用第二种方案。因为核心是要解决坐标系相对转换的问题，但第一种方案并没有解决，只是把问题方式转移了。还好，Three.js提供了现成的方法：getWorldPosition用于返回表示对象在世界空间中的位置向量。

这样，就可以得到方片的全局坐标。

现在知道了照片的位置和最后需要到达的位置。但如果直接从初始位置向最后位置运动，还会有个问题：照片可能直接穿过球体而达到最后的位置（不符合运动规律），所以这里需要尽可能做曲线运动，而不是让照片穿过球体。

我们还是用到了上面的坐标系转极坐标系的公式，通过初始的极坐标位置（sourceR，sourcePhi，sourceTheta）和目标位置的（targetR，targetPhi，targetTheta）。根据线性差值公式计算出在每一帧中的中间位置（currentR，currentPhi，currentTheta），再转换成点坐标系下的位置，即为每一帧时照片的位置，从轨迹上来看是一个曲线运动，且不会穿过球体。

step4：粒子动画开场

终于进入最后的环节了。在活动正式开场前，“笑脸星球“会散开成粒子状态，通过粒子运动拼成本场活动的主题文案。这里运用到粒子动画效果，需要事先知道每个粒子最后运动的位置。我们参考了canvas粒子动画的效果（具体可以自行查一下），简化如下：