接上一篇,基于rotate的方式模拟三维空间。

一开始定一个旋转原点，让物体随着这个原点旋转。（一般定为画布中心）

vpx = canvas.width/2;
vpy = canvas.height/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 > -focalLength) {
       // 把z方向扁平化
        var scale = focalLength / (focalLength + ball.zpos);
        ball.x = vpx + ball.xpos * scale;
        ball.y = vpy + ball.ypos * scale;
        ball.width = ballR*2*scale;
    }

}

到此，基本上绕一个固定点的旋转模型就可以了。但是由于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模型表现如下：
　　

　

【线条的rotate】

上面是多点rotate的3d模型，根据 点-线-面 过度的原则，有了关于点的模型，那么离下面线和面的也就不远了。

接着上面的点的模型，把点和点之间用线连起来，就可以出一个多线条选装版本。

    // 连接点与点之间   
     function drawLinesBetweenBalls () {
            var ctx = stage.ctx;
            ctx.beginPath();
            // 移动到第一个点
            ctx.moveTo(balls[0].x, balls[0].y);
            // 顺序连接点之间成线
            for (var i = 0; i < balls.length; i ++) {
                ctx.lineTo(balls[i].x, balls[i].y);
            }
            ctx.closePath();
            ctx.stroke();
        }

每次重绘的时候执行一下画线这个方法就可以，表现如下：