6

在 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，它就会变得松散。

4

1 回答 1

9

总有诀窍。:-)

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

最简单的方法是将虚拟 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您可以使用一个，但它的计算量更大。

于 2013-03-31T22:02:48.863 回答