如何将3D投影至2D平面3D初探

前一段时间，组里分享一个关于3D投影至2D平面上的主题，一直没有时间细细的咀嚼一下。

每天的代码大部分都是在写业务逻辑，细想一下，自从毕业上班以来，一直没有去写过关于图形展示方面的东东，所以决定先入个门，以后要是有需求了也可以快速上手，也当补充一下高中的数学知识。

1，旋转

处理旋转需要用到一个旋转变换公式：

http://zh.wikipedia.org/wiki/%E5%8F%98%E6%8D%A2%E7%9F%A9%E9%98%B5#.E9.80.8F.E8.A7.86.E6.8A.95.E5.BD.B1

绕原点逆时针旋转 θ 度角的变换公式是 与 ，用矩阵表示为：

由于是x,y,z的三维坐标系，所以根据上面的公式，可以得到如下的转换公式：

//向量旋转
function rotateX(x, y, z, a) {//绕X轴旋转
	return {
		x: x,
		y: y * Math.cos(a) - z * Math.sin(a),
		z: y * Math.sin(a) + z * Math.cos(a)
	};
}
function rotateY(x, y, z, a) {//绕Y轴旋转
	return {
		x: x * Math.cos(a) + z * Math.sin(a),
		y: y,
		z: z * Math.cos(a) - x * Math.sin(a)
	};
}
function rotateZ(x, y, z, a) {//绕Z轴旋转
	return {
		x: x * Math.cos(a) - y * Math.sin(a),
		y: x * Math.sin(a) + y * Math.cos(a),
		z: z
	};
}

2，球面坐标系转直角坐标系：

http://zh.wikipedia.org/wiki/%E5%9D%90%E6%A0%87%E7%B3%BB

球坐标系是用一个角度 表示位置和xy-面的相对关系。如P 点的球坐标为。

• 是原点至P点之间的距离。
• 是线 OP 在 xy-面的投影线与正 x-轴之间的夹角。
• 为原点到点 P 的连线与正 z-轴之间的天顶角。

用球坐标 来表示一个点的位置

而根据上面的介绍，可以写出下面的转换公式：

/*
 * 球面坐标系转直角坐标系
 * @param {Number} a 仰角的余角
 * @param {Number} b 转角
 * @param {Number} r 半径
 */
function spherical(a, b, r) {
	return {
		x: r * Math.sin(a) * Math.cos(b),
		y: r * Math.sin(a) * Math.sin(b),
		z: r * Math.cos(a)
	};
}

3，透视投影：

以上方的三维坐标系(x, y, z)为例，假设观察点设置在(1000, 0, 0)的A点上，而目标点B设置在(x < 0, y > 0, z >0)的区域内，并且设B点的坐标为Xb, Yb, Zb；设B点在YOZ平面上的投影的坐标是(0, Y’b. Z’b)，那么通过画图，可以得到一个公式：

1000 / (1000 - Xb) = Z’b / Zb (Xb < 0)  == >>  这样就得到了Z’b（投影点的z坐标）和目标点B的原始Zb坐标之间和Xb坐标之间的关系；

同理：

1000 / ( - Xb) = Y’b / (Yb – Y’b) (Xb < 0)

根据以上投影原理，可以列出以下代码片段：

主需要注意第二个红框，第一个红框是纯粹的平行投影（就像影子一样），第二个是透视投影，只是和上面说明的坐标系使用的不一样，但是原理是一样的。

----------

下面来看下整体代码吧：（不是原创，只是用来学习分享下）

不贴整体代码了，直接点击下方链接，太占地儿，直接新标签打开链接，查看源代码..

猛击这里！