如何找到魔方的方向？

Question

我正在尝试使用three.js在webgl中制作魔方游戏（您可以在这里试玩）。我遇到了一个问题，就是无法确定旋转魔方时应该绕哪个轴旋转。例如，如果魔方处于初始位置/旋转状态，如果我想把左侧层从下面向上旋转，我必须绕Y轴旋转。但是如果我将魔方绕Y轴旋转90度，我就必须绕Z轴旋转才能将左侧层从下面向上旋转。

我正在寻找一种方法来根据魔方的方向获取正确的旋转轴。目前，我检查魔方旋转矩阵轴向量中与向量(0,1,0)最平行的向量。如果我想要将前侧层从下面向上移动，但它在某些边缘情况下无法正常工作，例如上图所示的情况。

我猜应该有一种简单的方法来解决这个问题，但是我不太擅长矩阵和数学方面的知识 :)

- Christophe Belpaire

---

如果您将轴标记为_x_，_y_，_z_，并编辑您的问题以使用这些标记而不是“左”，“下”等，那么这将有所帮助。此外，对于旋转，请使用“顺时针”和“逆时针”等词语，假设绘制的轴方向为正。目前，您的描述非常模糊不清。 - Andrew Cheong

您可能需要考虑的一件事是在拖动鼠标时使用类似于“TrackballControls”的东西（或编写自己的版本）。这样，移动的是_相机_，而立方体本身保持平行于全局轴。这样旋转就更简单了。此外，将背景设置为黑色会看起来更好，依我之见。 :-) - WestLangley

你可以像@WestLangley所说的那样控制相机，或者将你的个体魔方块添加到一个父级object3D中，然后在其上使用你的控件。这样，当你对个体魔方块进行更改时，它将在父级object3D内局部进行，因此它们应该始终具有默认（易于使用）方向...至少我认为是这样，这是我在this中做过的事情。 - Daniel Robinson

我是这样做的：四元数旋转不按预期工作 - Spektre

Answer 1

一个 AxisHelper 可以显示场景的轴线，您可以通过它来确定方向。

var axishelper = new THREE.AxisHelper(40);
axishelper.position.y = 300;
scene.add(axishelper);

你也可以使用Chrome开发者工具或Firebug记录你的立方体并检查其位置和旋转属性。在代码中，可以使用log函数来实现。

- MCSharp

Answer 2

你可以将每个立方体的方向存储在其自己的4x4矩阵（即“模型”矩阵）中，该矩阵告诉您如何从立方体的本地坐标转换到世界坐标。现在，由于您想将立方体围绕世界坐标系中的一个轴（即向量）旋转，因此您需要将该轴转换为立方体坐标。这正是模型矩阵的逆所产生的效果。

- EthanP