canvas实现简单3D旋转效果

在上一篇文章中，我使用了canvas制作了一个动态的时钟(点此处查看)，难点在于找到旋转的坐标。
近日看到多处实现3D旋转效果的js库，心中痒痒，也想自己在canvas上制作3D效果
请先看DEMO

想在2D的canvas上绘制3D效果，最直观的方法是三维坐标转换为二维坐标。转换的方法是考虑映射，即假想在人眼和canvas之间存在一个三维球体，所看到的球体每一个点都可以映射到球后的canvas上。参见图1（请原谅绘图拙劣）

图1

给球加上坐标，即

图2

因此我们可以看到球的几个因素会影响canvas坐标的变化，因此设置球对象：包含了半径、到眼睛和canvas的距离以及后面会加上的星星数量。

var ball = { 
    rad: 100,
    starNum: 50,
    disToCanvas: 200,
    disToEye: 400
};

下面考虑将球坐标投影到canvas坐标，为了便于计算，将球心作为原点(0,0,0)，假设球心投影到canvas的点是(0,0)（需要对canvas进行原点变换）。先根据距离、球的大小计算出投影需要的整个面积。都是数学，直接贴上代码:

var cvs = {
    size: 0,
    circlePos: {
        x: 0,
        y: 0
    },
    setCvsSize: function() {
        var cs = ball.rad / ball.disToEye; //arcsin
        var theta = Math.asin(cs);
        cvs.size = 2 * Math.tan(theta) * (ball.disToCanvas + ball.disToEye);
        drawing.width = cvs.size;
        drawing.height = cvs.size;
        ctx.translate(drawing.width / 2, drawing.width / 2);
    }
};

这段代码的是设置最终的投影对象，包含size、circlePos(中心坐标)，以及设置投影映射（尺寸、原点）的函数，为了便于计算，将画布的原点设置到投影对象的中心了。
下面就是投影的代码块了，先看代码：

tans3DTo2DProj: function(pos3D) {
        var pos2D = {};
        var scale = (ball.disToEye - pos3D.y) / (ball.disToEye + ball.disToCanvas);
        pos2D.x = pos3D.x / scale;
        pos2D.y = pos3D.z / scale;
        return pos2D;
    },

这段代码是我定义变换对象中的一个方法，原理显而易见，根据比例设置canvas上的坐标。有了映射方法，还需要有3d旋转方法。实际上旋转三维坐标与旋转二维求其坐标的原理是一致的，把旋转分为水平和垂直两种（其他的旋转方向都可以通过这两种的旋转组合达到），根据旋转方向，沿着旋转轴线的垂直面将球体剖开转为二维即可，二维的旋转求解坐标可参见我的上一篇文章：使用canvas制作简易实时动态时钟，此不赘述。
因此完整的转换对象定义如下，包含映射、水平旋转、垂直旋转、映射后坐标更正为canvas的坐标习惯以及将映射、更正canvas坐标集成起来的方法。

var transUtil = {
    tans3DTo2DProj: function(pos3D) {
        var pos2D = {};
        var scale = (ball.disToEye - pos3D.y) / (ball.disToEye + ball.disToCanvas);
        pos2D.x = pos3D.x / scale;
        pos2D.y = pos3D.z / scale;
        return pos2D;
    },
    horRotate3d: function(pos3D, theta) {
        var nexPos = {};
        nexPos.z = pos3D.z;
        nexPos.x = pos3D.x * Math.cos(theta / 180 * Math.PI) - pos3D.y * Math.sin(theta / 180 * Math.PI);
        nexPos.y = pos3D.x * Math.sin(theta / 180 * Math.PI) + pos3D.y * Math.cos(theta / 180 * Math.PI);
        return nexPos;
    },
    verRotate3d: function(pos3D, theta) {
        var nexPos = {};
        nexPos.x = pos3D.x;
        nexPos.y = pos3D.y * Math.cos(theta / 180 * Math.PI) - pos3D.z * Math.sin(theta / 180 * Math.PI);
        nexPos.z = pos3D.y * Math.sin(theta / 180 * Math.PI) + pos3D.z * Math.cos(theta / 180 * Math.PI);
        return nexPos;
    },
    transToCanvasPos: function(pos2D) {
        var nexPos = {};
        nexPos.x = pos2D.x;
        nexPos.y = -pos2D.y;
        return nexPos;
    },
    trans3Dto2DAll: function(pos3D) {
        var res = transUtil.transToCanvasPos(transUtil.tans3DTo2DProj(pos3D));
        return res;
    }
};

现在映射、旋转的工具有了，就是假想球体、以及球体上的小星星，并绘制其映射图案的问题了。
源码不贴了，有需要可以参考完整代码guthub。
不足的是还需要考虑球体的远近关系所带来的阴暗颜色变化等，以及球体背面是否需要映射等。留作下一步解决吧~