使用轴和角度进行3D旋转

Question

我知道3D旋转在SO和许多其他网站上有很好的记录,但尽管阅读了无数的解释,我仍然没有弄清楚我哪里出错了.我的背景是艺术和设计,而不是数学和编程,我不确定我的攻击角度(没有双关语)是否合适.而不是粘贴我的惨淡代码拼凑而成,我包括一个描述我的问题的图像.我真正喜欢的是如何解决它的逐步措辞.伪代码很有用,但如果有人将我的目标指向正确的方向或指出常见的陷阱,我会学到更多.

---

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

洋红色矢量=原点 - >一些X,Y,Z点

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

白色矢量=两个洋红色矢量的交叉乘积(扩展显示,实际矢量归一化)

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

---

我之前使用过Away3D和Papervision; 在这些库中,将Euler角应用于对象的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

提前致谢,

卡西

---

编辑:开始赏金

也许我误解了这应该是怎么回事.这是另一张图片:

我认为这个洋红色矢量是轴是不正确的,橙色箭头表示基于角度的这个轴的旋转？无论如何,我想根据一些方向向量定向青色立方体并旋转它.我究竟做错了什么!？

Answer 1

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

给定：
originalVec = 指向 Y 轴的单位向量（立方体顶部/法线的方向）
targetVec = 白色向量

现在您需要旋转 OriginalVec 的轴和角度以与 targetVec 对齐。最直接的旋转轴垂直于两个输入向量，因此取它们的叉积。该轴不是单位向量，因此也要对其进行归一化。旋转角度（以弧度为单位）是点积的反余弦。

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 采取以度为单位的角度的实现。当输入向量平行或相反时，轴为 <0,0,0>，因此应进行测试。如果立方体以错误的方式旋转，那么叉积向量参数的顺序就是错误的，我永远不记得是哪个，只是尝试它们。嗯。

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

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

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