接上一篇,基于rotate的方式模拟三维空间。
一开始定一个旋转原点，让物体随着这个原点旋转。（一般定为画布中心）
vpx = canvas.Width＜/span>/2;
vpy = canvas.Height＜/span>/2;
然后为了让旋转效果和用户有交互，让旋转速度和角度和鼠标位置挂上关系
stage.addEventListener('mousemove', function (x, y) {
angleY = (x - vpx) .001;
angleX = (y - vpy) .001;
});
接下来，如果我们有个三维空间里的小球ball，它有三向坐标（xpos, ypos, zpos）。下面就要计算出经过一个角度变化后的三个坐标
// 绕y轴变化，得出新的x，z坐标
function rotateY(ball, angleY) {
var cosy = Math.cos(angleY),
siny = Math.sin(angleY),
x1 = ball.xpos cosy - ball.zpos siny,
z1 = ball.zpos cosy + ball.xpos siny;
ball.xpos = x1;
ball.zpos = z1;
}
上面是绕y轴的，同理，可以得出绕x轴的
function rotateX(ball, angleX) {
var cosx = Math.cos(angleX),
sinx = Math.sin(angleX),
y1 = ball.ypos cosx - ball.zpos sinx,
z1 = ball.zpos cosx + ball.ypos sinx;
// 新位置
ball.ypos = y1;
ball.zpos = z1;
}
经过变换得到新的（xpos, ypos, zpos）后，接下来要做的事情就是把这个三维坐标的zpos去掉，也就是变换到二维空间来。
根据上文说的，在普通的模型中，z坐标对x，y的影响在二维体系里一般表现在对x，y造成偏移量，对大小，透明度这几个属性的影响。所以，把三维空间降到二维中来
function render (ball) {
// focalLength 表示当前焦距，一般可设为一个常量
if (ball.zpos
// 把z方向扁平化
var scale = focalLength / (focalLength + ball.zpos);
ball.x = vpx + ball.xpos scale;
ball.y = vpy + ball.ypos scale;
ball.width = ballR2scale;
}//代码效果参考：http://www.ezhiqi.com/bx/art_4983.html
}//代码效果参考：http://www.ezhiqi.com/bx/art_4395.html
到此，基本上绕一个固定点的旋转模型就可以了。但是由于canvas绘制矢量图是根据代码执行顺序画上去的。而通常我们都是直接用一个数组作为collection来搜集管理各个点（比如小球）。而这个数组并没有按照我们需要的根据z方向的大小来排序，所以直接一个for循环进去按个绘制小球的时候会发现：
z方向对于x，y的偏移，小球大小，透明度等都是正确渲染的，但是有个问题就是会出现距离近的球反而被挡在距离远的球后面（不透的球在半透球后面）。造成这个现象的原因就是上面所说。
所以为了解决这个问题，有个办法就是每次变换后对我们collection里面的元素按z的大小顺序重排一下就ok
function sortZ () {
balls.sort(function (a, b) { return b.zpos-a.zpos })
stage.children.sort(function (a, b) { return b.zpos-a.zpos })
}
至此，一个【多点绕固定点旋转】3d模型表现如下：
html {overflow:hidden}
body {position: absolute; margin:0; padding:0;width:100%; height:100%}
canvas {display:block;border:2px solid #ccc; margin:10px auto;}//代码效果参考：http://www.ezhiqi.com/zx/art_2774.html
p {text-align: center; font-size:12px;color:#454545;}
