transformjs 玩转星球

In 未分类 on 2016年12月05日 by TAT.dnt view: 4,069

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

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

生成球上点坐标

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

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

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

function randomPoints() {

var x, y, z, j = -1, i = 0;

for (; i < size; i++) {

x = getRandomNumber(-250, 250);

y = getRandomNumber(-250, 250);

j *= -1;

if (x * x + y * y <= r * r) {

z = j * Math.sqrt(Math.abs(r * r - x * x - y * y));

positions.push({x: x, y: y, z: z});

rd_positions.push({x: x, y: y, z: z});

}

上面的生成过程很取巧：

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

function createImgs() {

var i = 0,

len = positions.length;

for (; i < len; i++) {

var img = document.createElement("img");

img.style.position = "absolute";

img.style.left = "0px";

img.style.top = "0px";

img.src = "../asset/star.png";

document.body.appendChild(img);

Transform(img,true);

transformImg(img