在孩子中反转父母的旋转，所以孩子在世界上看起来没有旋转

Question

在 THREE.js 场景中，我有一个旋转的父对象。此父级的子级应在位置上锁定到父级的轮换，但他们自己的轮换需要是独立的，而不是从父级继承。

一个简单的例子是让孩子们总是面对镜头。

我的尝试是“反转”父级在子级中的旋转。那就是：

# render loop
render = ->
  requestAnimationFrame(render)

  # Rotate the parent
  @parent.rotation.x += 0.01
  @parent.rotation.z += 0.02

  # Attempt to invert rotation of the parent, and fail :(
  for child in @children
    child.rotation.x = -@parent.rotation.x
    child.rotation.z = -@parent.rotation.z

这种天真的尝试的结果就在这里。黄色的小平面是灰色立方体的子级，它们以我没想到的方式旋转……

http://jsfiddle.net/b6jgS/

我想要的是那些平面始终是完美的正方形，随着立方体的旋转而移动，但它们的旋转锁定到世界，而不是父级。

那么我将如何撤消父级在子级中的旋转？我在这里错过了什么疯狂的数学？

我知道我可以在这个示例中使用点精灵，但我最终会考虑到更复杂的需求，而点精灵将无法做到这一点。所以我需要想办法用一个真正的 3D 对象来做这个。

---

编辑：这确实适用于每个轴。如果父母只在 X 上旋转，我可以在孩子的 X 旋转上反转它，就像我想要的那样。只有 Z 相同。但是，如果我开始改变然后反转 X 和 Z，它就会变得很松散。

Answer 1

总有诀窍。 :-)

您希望父对象的子对象的位置相对于父对象，但其旋转与父对象无关。

最简单的方法是将虚拟 Object3D 对象作为父对象的子对象，然后将子对象添加到 场景（不是父对象）并让子对象从虚拟对象。

parent                 scene
   |                     |
   --- object_1          --- child_1
   |                     |
   --- object_2          --- child_2

child_1.position 是从object_1 的世界位置设置的：

child.position.setFromMatrixPosition( parent.children[ idx ].matrixWorld )

作为替代方案，您可以使用THREE.Gyroscope，但它的计算量更大。