Question

我正在尝试在平面上制作涉及立方体的动画。我只能在x / y轴上转动它（不需要在它下面看）。然后，我可以将立方体翻过任何边缘 - 如果我的立方体的一侧“接触”表面，它会粘在它上面（表面会在那里变色）并从我的立方体上消失。

以下是我想说的内容的描述：

当你再向同一个方向转动它时。

我该怎么做？

任何帮助表示感谢。

Answer 1

感谢您提出的问题，我将其作为编码挑战，并花了几个小时来实现这样的事情。结果如下：http://codepen.io/usefulthink/pen/zoLLpP - 我清理了代码并添加了很多注释，因此你可能会在那里找到很多有用的东西（也可以随意以任何你喜欢的方式使用代码）< / p>

基本上，有些事情要提前注意：

如@Carlos in his answer所述，我使用独立网格构建了立方体和线框，并使用THREE.Group将它们保持在一起。
three.js有两个非常好的方法，THREE.SceneUtils.attach和THREE.SceneUtils.detach对这类东西非常有帮助（以前没有人知道）

我实施的基本程序是：

在开始动画之前，检查底部是否有脸可以从盒子里分离出来。使用
完成分离
```
THREE.SceneUtils.detach(bottomFace, bottomFace.parent, scene);
```
从父对象中移除对象（在我们的例子中是具有立方体移动部分的组）并将其添加回同一位置的场景。此时，还会触发切换材质的动画。
对于动画，我们需要一个枢轴点，这样立方体就可以在它的边缘上旋转。这可以使用我之前提到的特殊组和附加/分离方法来实现。看看
```
function setPivotPosition(position) {}
```
了解如何使用任意点作为旋转的枢轴点一个物体。
使用单独的组作为枢轴点有一个主要优点：我们可以使用three.js提供的pivot.rotation属性更新动画。这也允许我们使用像tween.js这样的补间库来处理所有动画。

如果您对此有任何疑问，请告诉我们：）

Answer 2

如何使用方形表面而不是立方体。使用六个方形表面并为装配设置动画。在每个步骤中更改旋转轴。

这里有一些旋转样本。