javascript - 带轴和 Angular 3D 旋转

Question

我知道 3D 旋转在 SO 和许多其他网站上都有详细的记录，但尽管阅读了无数的解释，我仍然没有弄清楚我哪里出错了。我的背景是艺术和设计，而不是数学和编程，而且我从来不确定我的攻击 Angular (没有双关语意)是否正确。我没有粘贴我的糟糕代码的拼凑，而是包括一张描述我的问题的图像。我真正想要的是如何解决它的分步措辞分解。伪代码很有用，但如果有人将我指向正确的方向或指出常见的陷阱，我会学到更多。

---

红色 = X 轴，绿色 = Y 轴，蓝色 = Z 轴

Magenta vectors = origin --> 一些 X,Y,Z 点

洋红色立方体 = 两个洋红色矢量的端点的平均值(有更好的名称吗？)

白色向量 = 两个洋红色向量的叉积(为显示而扩展，实际向量已归一化)

青色立方体对象 = 旋转失败

---

我以前使用过 Away3D 和 Papervision；在这些库中，将欧拉 Angular 应用于对象的 rotationX、rotationY 或 rotationZ 属性将局部旋转对象，就好像它在原点一样，而不管其实际位置如何。使用 Three.js，情况并非如此。修改对象的 rotation.x 和 rotation.y 属性会产生奇怪的效果，即对象明显在 Z 轴上倾斜了一点。更令人困惑的是，当物体停留在原点时会发生这种情况。我认为也许使用 Quaternion-->Matrix 或 Axis/Angle-->Matrix 函数可以解决我的问题，但没有骰子。似乎有一个我没有理解的核心概念。

无论如何，我想做的是将立方体定向到叉积向量(白色)，以便立方体的顶部朝向该向量的方向。然后我想沿同一轴旋转立方体。我附上的图片显示的结果比我愿意承认的要多。我的代码大致如下所示:

axis = Vector3.cross(a, b)
axis.normalize()
angle = 45 * TO_RADIANS;
quat = AxisAngle2Quaternion(axis, angle)
rot = Quaternion2Matrix(quat)
cube.matrix = rot

提前致谢

凯西

---

编辑:开始赏金

也许我误解了它应该如何工作。这是另一张图片:

我是否认为这个洋红色矢量是轴，而橙色箭头表示基于 Angular 围绕该轴旋转？不管怎样，我想根据某个方向向量来定位青色立方体并旋转它。我做错了什么!？

Answer 1

您的方法听起来是正确的，但您没有显示 a、b 向量是什么，我猜，恒定 Angular 只是为了测试。我以前这样做过，所以我挖掘了我的代码，这是我发现的数学...

给定:
originalVec = 指向 Y 轴(立方体顶部/法线方向)的单位向量
targetVec = 白色向量

现在您希望旋转 originalVec 的轴和 Angular 与 targetVec 对齐。最直接的旋转轴垂直于两个输入向量，所以取它们的叉积。该轴不是单位向量，因此也对其进行归一化。旋转的 Angular (以弧度为单位)是点积的反余弦值。

axis = Vector3.cross(originalVec, targetVec)
axis.normalise
angle = inversecos(Vector3.dot(originalVec, targetVec))

quat = AxisAngle2Quaternion(axis, angle)
rot = Quaternion2Matrix(quat)
cube.matrix = rot

我想您不想替换立方体的矩阵，而是想用新的变换组合它...

cube.matrix.multiplyBy(rot)

...但我对此不是 100% 确定。此外，我已经看到 AxisAngle2Quaternion 以度为单位的 Angular 实现。当输入向量平行或相反时，轴为 <0,0,0>，因此应对其进行测试。如果立方体以错误的方式旋转，则叉积矢量参数的顺序错误，我不记得是哪个，只是尝试了它们。嗯。

编辑
我有机会使用 Three.js 并破解其中一个示例来定位立方体。评论显示我添加内容的位置，所有定向数学都发生在 alignCube() 中。
Align and Spin example
向上/向下移动鼠标移动目标线。在线上向左/向右旋转鼠标。

Three.js 中的场景对象似乎都继承自 Object3D，它的 autoUpdateMatrix 属性默认设置为 true。这需要设置为 false，否则将调用 updateMatrix 函数，该函数会根据对象的位置、比例和旋转属性重新计算矩阵。或者，您可以分配不同的 updateMatrix 函数。

如果 Three.js 有一些文档就好了:)