在孩子中反转父母的旋转，所以孩子在世界上看起来没有旋转 [英] Invert rotation of parent in the child, so the child appears unrotated in the world

问题描述

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

In a THREE.js scene, I have a parent object that rotates around. This parent has children that should be positionally locked to their parent's rotation, but their own rotation needs to be independent and not inherit from the parent.

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

A simple case would be to make the children always face the camera.

我的尝试是反转"父级在子级中的旋转.那就是:

My attempt was to "invert" the rotation of the parent in the children. That is:

# 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 = [e-mail].x
    child.rotation.z = [e-mail].z

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

The result of this naive attempt is here. The small yellow planes are children of the gray cube, and they rotate around in ways I wouldn't expect...

http://jsfiddle.net/b6jgS/

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

What I want is those planes to be perfect squares the whole time, moving with the rotation of the cube, but with their rotation locked to the world, and not the parent.

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

So how would I undo the rotation of the parent in the child? What crazy math am I missing here?

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

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

This does work for each axis alone. If the parent only rotates on X, I can invert that on the child's X rotation and it's just like I want. Same for only Z. However, if I start to vary and then invert both X and Z it then gets all squirrely.

推荐答案

总有诀窍.:-)

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

You want to have children of a parent object whose positions are relative to the parent, but whose rotations are independent of the parent.

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

The easiest way to do this is to have dummy Object3D objects as children of the parent and then add the children to the scene (not the parent) and have the children get their world positions from the dummy objects.

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

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

child_1.position is set from object_1's world position:

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

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

As an alternative, there is a THREE.Gyroscope that you could use, but it is computationally more intensive.

这篇关于在孩子中反转父母的旋转，所以孩子在世界上看起来没有旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！