在上一篇文章中，我使用了canvas制作了一个动态的时钟(点此处查看)，难点在于找到旋转的坐标。
近日看到多处实现3D旋转效果的js库，心中痒痒，也想自己在canvas上制作3D效果
请先看DEMO
想在2D的canvas上绘制3D效果，最直观的方法是三维坐标转换为二维坐标。转换的方法是考虑映射，即假想在人眼和canvas之间存在一个三维球体，所看到的球体每一个点都可以映射到球后的canvas上。参见图1（请原谅绘图拙劣）
给球加上坐标，即
因此我们可以看到球的几个因素会影响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。
不足的是还需要考虑球体的远近关系所带来的阴暗颜色变化等，以及球体背面是否需要映射等。留作下一步解决吧~
