在孩子中反转父母的旋转，所以孩子在世界中看起来没有旋转 [英] 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屋！