围绕十二面体旋转

Question

我正在尝试制作一个Three.js场景，我有一个十二面体。我希望相机在十二面体的一侧放大，当按下一个按钮时，我想让它缩小，旋转直到它站在另一边，然后再放大。

说清楚：

如果相机在第1侧完全放大并按下“5”，我希望相机缩小 - 显示十二面体 - 然后向5方向旋转（或让十二面体旋转面向相机的第5侧？ ）并再次放大。重要的是，摄像机始终与其所面对的五边形底座平行，而不是顶部或任何其他旋转。

我认为从一个立方体开始是聪明的，不要开始太复杂。我添加了一些补间（当按下G时）来说明一些基本动作，但这在小提琴中看起来不太好。 jsfiddle

因为我觉得我应该有一个能够完成所有这些运动并为我计算的功能，所以我首先尝试记下每个位置和旋转，每个侧视图都来自立方体，所以我可能会检测到一个模式。我可以看到我为立方体写下的值中的某些模式，但我不知道如何将其转换为工作函数，更不用说十二面体了。我注意到的值是

side1 (0, 0,  600) (0, 0, 0)
side2 (600, 0,  0) (0, pi/2, 0)
side3 (0, 0, -600) (0, pi, 0);
side4 (-600, 0, 0) (0, -pi/2, 0);
side5 (0, 600,  0) (-pi/2, 0, 0);
side6 (0, -600, 0) (pi/2, 0, 0);

我可以看到某种重复发生和一些关系，但我不会看到如何在函数中链接它们。我认为这是实现相同功能的第一步，但是对于更复杂的形状。任何人都可以引导我走向一个我应该正在寻找的方向吗？因为我当然可以使用很多if条款，但这不是我感觉到的正确方法。

Answer 1

要解决这个问题，我们首先要做的是得到十二面体每边的中心坐标。

如你所知，在three.js中，一个网格由三角形组成，每个三角形都有三个点，所有的面和顶点都可以在十二面体的mesh.geometry.faces和mesh.geometry.vertices.找到，每边有三个面和五个顶点，我使用每个面法线将它们分成12组，这些组具有相同的法线和同一平面。然后，我们得到每边5个点，计算平均坐标以获得中心坐标。

获得坐标后我们需要旋转，一种方法是旋转十二面体并保持相机，另一种方法是保持十二面体并翻译相机，在这种情况下，我选择第二种。

现在相机面对中心A，绿色圆圈是相机的轨道，因为我们需要保持从相机到十二面体中心的距离。

要获得目标位置，我们只需缩放centerB向量，使centerB的坐标为对象系统坐标，我们需要应用矩阵将坐标更改为世界系统坐标。

然后，我们在动画中翻译相机，相机需要拍弧。 我使用3D空间中圆的参数方程来做到这一点，关于你可以看到Parametric Equation of a Circle in 3D Space的等式。通过这个公式，我得到了摄像机位置的参数θ1和目标位置的θ2。我在每个动画帧循环中用θ1更新摄像机位置。

我在jsfiddle上添加了一些评论。（还有一些错误，需要更新。）

Here是保持相机并旋转物体的另一种解决方案。