如你所见。这篇就是要讲下使用transformjs制作星球的过程。你也可以无视文章，直接去看源码和在线演示：

源码 | 在线演示

代码100行多一点，直接看也没有什么压力。下面分几步讲解下。

生成球上点坐标

设球心为 (a,b,c),半径为r,
则球的标准方程为 (x-a)+(y-b)+(z-c)=r

这里假设球心的（0，0，0），则：
标准方程为 x+y+z=r

因为可以渲染的时候再把球的本地坐标转为世界坐标进行位移，所以球心(0,0,0)便可以。

xi (; i < size; i++) { x ); y ); j (x * x + y * y <= r * r) { z .xyzxyz

上面的生成过程很取巧：

1.随机生成2D内的圆内的坐标x和y。（x * x + y * y <= r * r就是表示圆内）

2.根据2D维度的坐标推算其属于球面上的z

其中positions用来存放所有点的local坐标，rd_positions用来以后存放投影后的坐标。

坐标转Dom

i len (.....).

所有的点都对应创建一个绝对定位的图片，并且通过Transform(img,true)给img注入transformation能力。注意第二个参数true代表关闭透视投影，因为投影下面会自己去实现。

投影变换

index len(rp ....

为了简单起见，把球心和摄像机（也可以叫眼睛、亦或是视点）的坐标分别设置为：

center camera_position distance

distance代表摄像机到投影平面的距离，摄像机就固定在球心的正前方不动，这样进行透视投影或正交投影计算起来无比方便，免去用齐次坐标、4*4矩阵的过程。如下简单推导便可：

这里需要注意的是，上面是透视投影的图解,会产生近大远小的感觉。透视投影是视锥体（上图没有把视锥体画出来），正交投影是立方体。
正交投影如下图解，x和y坐标投影后不变就可以了：

可以这么理解：

透视投影从一个点看无数个点

正交投影从无数个点看无数个点

旋转

cx, z, i len(; i < len; i++) { cx = positions[i].x; z = positions[i].z; positions[i]...sin(step_angle); positions[i]..

可以看到，上面是绕y轴旋转，所以y的坐标不变，x和z需要经过下面的matrix变换：

Transformation

z ......distance / .(r ()len(

初始化和循环

()()(()(); })();

通过通过上面几行代码串整个流程。通过requestAnimationFrame循环执行tick。

最后

为了加深理解，你可以把源码 clone下来，然后改代码实现：

第二种实现方式:试试Transform(img,false)

因为Transform第二个参数不传，或者设置为false的时候是打开透视投影的。
所以可以设置img.translateZ来使用浏览器自身的透视投影，省去positionsProjection过程。

创建图片的时候，使用下面的方式注入Transformation能力，

Transform(img, false);

渲染的时候直接使用原始坐标便可：

p ......(r r)()len(

循环和初始化，不再需要投影过程：

()(tick); } (())();

transformjs

transformjs提供了基础的transformation能力，不与任何时间和运动库绑定。虽然官网demo简单，但是稍微费点脑细胞就可以做出很酷炫的效果。所以酷炫靠大家，用transformjs就对了。
传送门：transformjs 主页 | transformjs Github

所有例子可以在上面找到。