javascript - 使用具有特定功能的 Three.js 在表面上旋转立方体

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 6 年前。

Improve this question

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

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

当您朝同一方向再翻转一次时。

我该怎么做？

感谢任何帮助。

Answer 1

谢谢你的问题，我把它当作一个编码挑战，花了几个小时来实现这样的事情。这是结果:http://codepen.io/usefulthink/pen/zoLLpP – 我清理了代码并添加了很多注释，因此您可能会在其中找到很多有用的东西(另外，请随意以您喜欢的任何方式使用代码)

因此，本质上，需要预先注意一些事项:

• 正如 @Carlos 所指出的 in his answer ，我从独立的网格构建了立方体和线框，并使用 THREE.Group 将它们保持在一起。
• two.js 有两个非常好的方法，THREE.SceneUtils.attach 和 THREE.SceneUtils.detach，它们对于这类东西非常有帮助(没有之前就知道它们)

我实现的基本程序是这样的:

• 在开始动画之前，检查底部是否有一张脸可以从盒子上拆下来。分离是通过

  完成的

  THREE.SceneUtils.detach(bottomFace, bottomFace.parent, scene);
  

  它将对象从其父对象(在我们的例子中是具有立方体的移动部分的组)中删除，并将其添加回场景中的同一位置。此时，切换 Material 的动画也被触发。

• 对于动画，我们需要一个枢轴点，以便立方体可以在其边缘上旋转。这可以使用特殊的组和我之前提到的附加/分离方法来实现。看看

  function setPivotPosition(position) {}
  

  看看如何使用任意点作为旋转的枢轴点对象的。

• 使用单独的组作为枢轴点有一个主要优点:我们可以使用 Three.js 提供的 pivot.rotation 属性来更新动画。这也允许我们使用像 tween.js 这样的补间库来处理所有动画。

如果您对此还有任何疑问，请告诉我:)