有人可以解释这个立方体旋转脚本的工作原理吗？
Kin*_*tor 3 language-agnostic math rotation cube
如果你转到以下链接,你会看到一个非常酷的Javascript模拟的立方体,根据你的鼠标位置旋转.
模拟:这里.
如果您查看立方体旋转脚本的来源,您将看到:
<script type="text/javascript">
/* I wrote this script in a few minutes just for fun. It's not made to win any
competition. */
var dimension = 1, a = 0, b = 0, i = 27;
while (i--) document.write('<b id="l' + i + '">+</b>');
function f()
{
i = 0;
for (x = -dimension; x <= dimension; x += dimension)
for (y = -dimension; y <= dimension; y += dimension)
for (z = -dimension; z <= dimension; z += dimension)
{
u = x;
v = y;
w = z;
u2 = u * Math.cos(a) - v * Math.sin(a);
v2 = u * Math.sin(a) + v * Math.cos(a);
w2 = w;
u = u2; v = v2; w = w2;
u2 = u;
v2 = v * Math.cos(b) - w * Math.sin(b);
w2 = v * Math.sin(b) + w * Math.cos(b);
u = u2; v = v2; w = w2;
var c = Math.round((w + 2) * 70);
if (c < 0) c = 0;
if (c > 255) c = 255;
s = document.getElementById('l' + i).style;
s.left = 300 + u * (w + 2) * 50;
s.top = 300 + v * (w + 2) * 50;
s.color = 'rgb(' + c + ', ' + c + ', 0)';
s.fontSize = (w + 2) * 16 + 'px';
/* The Digg users missed depth sort, so here it is. */
s.zIndex = Math.round((w + 2) * 10);
i++;
}
}
/* Using a timer instead of the onmousemove handler wastes CPU time but makes
the animation much smoother. */
setInterval('f()', 17);
</script>
我已经多次查看了,我仍然不明白如何计算立方体的点数.这是使用"Euler Rotations"吗？我遇到的一个大问题是使用单字母变量名称对我来说毫无意义.
拥有必要数学知识的人是否有助于解释在此模拟中旋转立方体后数学如何工作？我想做类似的事情,但在计算积分位置时,我有点迷失.
- 他写了27(3x3x3)+(在一个粗体的html节点中)
- 他从-1-> 0-> 1迭代x,y和z轴(所以到达这个立方体的所有27(3x3x3)点)
- 所以他会做的每一点:
- 通过(简单的2d旋转)围绕z轴旋转
- 围绕x轴旋转b(再次简单2d旋转)
- 将值c(只是缩放的z-coord)钳入[0..255](使用此作为颜色[深度提示]
- 获取html节点并使用简单的透视方法将它们放置在(300/300)左右
- 根据depht设置颜色和大小
你忘记提到的重要一点是全局a和b在body标签中设置:
<body onmousemove="a = event.clientX / 99; b = event.clientY / 99;"
变量列表:
- 我只是一个柜台(没有功能)a
- a是围绕z轴的角度
- b是围绕x轴的角度
- c是颜色强度
- x,y,z是[-1,-1,-1] - [1,1,1]之间的空间坐标
- u,v,w是围绕z轴旋转的点
- u2,v2,w2是围绕x轴旋转的点
- s是htmlnode
他使用与欧拉角相似的方法,但他只使用两个轴,因此没有使用欧拉角的隐含限制.
有关三维旋转的更多信息,请查看维基百科:
http://en.wikipedia.org/wiki/Rotation_matrix#Dimension_three
还要注意,他的投影不是真正的3d:他没有按z坐标划分投影到二维空间.所以深度是"扭曲的"(很难解释,但如果你连接十字架,它们将不会形成一个立方体,而是一个扭曲的立方体).在真正的二维投影中,直线将再次形成直线.
正确的透视投影看看这篇文章(不要被矩阵的东西弄糊涂..只是图和一个简单的拦截定理就是你所需要的):
http://en.wikipedia.org/wiki/Perspective_projection#Perspective_projection
x' = x * (eye_dist / eye_dist + z)
y' = y * (eye_dist / eye_dist + z)
对于这样一个简单的方法,没关系,严重的3d将适用于齐次坐标.