在 THREE.js 场景中,我有一个旋转的父对象。这个父级的子级应该在位置上锁定到他们父级的旋转,但是他们自己的旋转需要是独立的,而不是从父级继承。
一个简单的例子是让 children 总是面对镜头。
我的尝试是“反转”父级在子级中的旋转。那是:
# 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
这种天真的尝试的结果就在这里。黄色的小平面是灰色立方体的 child ,它们以我意想不到的方式旋转......
http://jsfiddle.net/b6jgS/
我想要的是这些平面始终是完美的正方形,随着立方体的旋转而移动,但它们的旋转锁定到世界,而不是父级。
那么我将如何撤消父级在子级中的旋转?我在这里错过了什么疯狂的数学?
我知道我可以在这个例子中使用点 Sprite ,但我有更复杂的需求,最终点 Sprite 不会做。所以我需要想办法用一个真正的 3D 对象来做到这一点。
编辑:这确实适用于每个轴。如果父级只在 X 上旋转,我可以在子级的 X 旋转上反转它,这就像我想要的。只有 Z 相同。但是,如果我开始变化,然后将 X 和 Z 都反转,那么它就会变得松散。
最佳答案
总有窍门。 :-)
您希望父对象的子对象的位置相对于父对象,但其旋转独立于父对象。
最简单的方法是将虚拟 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
你可以使用它,但它的计算量更大。
关于3d - 在 child 中反转 parent 的旋转,所以 child 在世界中看起来没有旋转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15734049/