Language agnostic 有人能解释一下这个立方体旋转脚本背后的数学原理吗？_Language Agnostic_Math_Rotation_Cube

Language agnostic 有人能解释一下这个立方体旋转脚本背后的数学原理吗？

language-agnostic math

Language agnostic 有人能解释一下这个立方体旋转脚本背后的数学原理吗？,language-agnostic,math,rotation,cube,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

如果您转到以下链接，您将看到一个基于鼠标位置旋转的立方体的非常酷的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>


/*我在几分钟内写了这个剧本只是为了好玩。这不是为了赢得任何胜利
竞争*/
变量维度=1，a=0，b=0，i=27；
而（i--）document.write（'+'）；
函数f（）
{
i=0；
对于（x=-dimension；x而言，其想法是使用标准旋转矩阵。在2D中，这是：
--     --   --             -- --     --
| x_new |   | cos(a) -sin(a) | | x_old |
|       | = |               | |       |
| y_new |   | sin(a)  cos(a) | | y_old |
---    --   --             -- --     --

其中a
是旋转的角度
这个想法是用这个变换程序把每一个点都翻译成一个新的点。为了更好地理解这一点，考虑一个单位圆（我不知道如何用ASCII艺术绘制），问问自己如何把点（0，1）移到<代码>（Sqt（2）/2，SqRT（2）/2）< /> >（45度旋转）。
现在将其转换为
（1,0）
，另一个45度旋转：
x_new = x_old * cos(45) - y_old * sin(45) = sqrt(2)/2 * sqrt(2)/2 - sqrt(2)/2 * sqrt(2)/2 = 0
y_new = x_old * sin(45) + y_old * cos(45) = sqrt(2)/2 * sqrt(2)/2 + sqrt(2)/2 * sqrt(2)/2 = 1

将其扩展到3D非常简单，您所要做的就是使用另一个多应用程序沿XZ平面旋转
他写了27（3x3x3）+（在一个
粗体（html节点）
他从-1->0->1迭代x、y和z轴（从而到达该立方体的所有27（3x3x3）个点）
因此，对于每一点，他都会：
绕z轴旋转（简单二维旋转）
a绕x轴旋转b（再次进行简单的2d旋转）
将值c（仅为缩放z坐标）钳制为[0..255]（将其用作颜色[深度提示]
获取html节点并使用简单的透视方法将它们放置在（300/300）周围
根据深度设置颜色和尺寸
您忘记提及的重要一点是，全局a和b设置在body标记中：
<body onmousemove="a = event.clientX / 99; b = event.clientY / 99;"

对于这样一种简单的方法，它是可以的，但是，严肃的3d将在齐次坐标下工作。你难道不讨厌人们在没有注释的情况下使用这样的变量名吗？我讨厌模糊的代码！这使得反编译变得非常困难！；-）@Lucas Aardvark，老实说，我不认为他这么做是认真的试图混淆他的代码。我认为他只是在试图减少他的脚本的大小。他与Digg用户就源代码和某些东西进行了大量的讨论。我认为这是真正可读的，但你忘了onmousemov事件，所以唯一的问题是：a和b是怎样的set@Peter帕克，很有意思。你认为需要做什么来解决上述脚本中的问题？按你建议的z坐标除以？你需要为每个点进行投影。通常这只是通过截距定理完成的。你需要一个远距离的视点（眼睛与屏幕之间的距离）。公式为：x'=x*（远_眼点/远_眼点+z）[与y相同]
<body onmousemove="a = event.clientX / 99; b = event.clientY / 99;"

x' = x * (eye_dist / eye_dist + z)
y' = y * (eye_dist / eye_dist + z)