rotate 3D 篇二
接上一篇,基于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();
}
每次重绘的时候执行一下画线这个方法就可以，表现如下：