围绕十二面体旋转答案

【问题标题】：Rotating around dodecahedron围绕十二面体旋转
【发布时间】：2017-05-21 02:44:55
【问题描述】：

我正在尝试制作一个包含十二面体的 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 子句，但我觉得这不是正确的方法。

【问题讨论】：

你好，我做了一个jsfiddle，好像keydown事件在jsfiddle上不好用，你可以导出代码看看，有一些奇怪的bug，我会明天继续弄清楚。
哇，添加了很多代码。我希望有人能指导我做这件事或给出提示的正确路径，而不是几乎完全做到，哈哈。你能详细说明你所做的选择吗？因为发生了很多事情，我不明白它为什么会起作用。
这个问题很有意思，我自己试了一下。但是我还没有弄清楚这个错误，我将分享我的想法，一旦我修复了错误，我会更新我的帖子以做出完整的解释。
我还想到了一些可以攻击这个项目的方法，一旦我找到时间，我将编辑我的帖子以展示我的方法。也许我们可以一起找到更好的解决方案。
是的，没关系，我正在写我的想法和解释。

标签： javascript 3d three.js

【解决方案1】：

为了解决这个问题，我们首先要做的是获取十二面体每一边的中心坐标。

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

得到坐标后我们需要旋转，一种是旋转十二面体并保留相机，另一种方法是保留十二面体并平移相机，在这种情况下，我选择了第二种。

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

为了得到目标位置，我们只是缩放centerB向量，因为centerB的坐标是物体系统坐标，我们需要应用矩阵来改变坐标到世界系统坐标。

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

我在jsfiddle上添加了一些cmets。（还有一些bug，需要更新。）

Here 是另一种解决方案，保持相机并旋转对象。

【讨论】：