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

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您可以使用一个，但它的计算量更大。