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
この素朴な試みの結果がここにあります。小さな黄色い飛行機は灰色の立方体の子で、思いもよらない方向に回転します...
私が望むのは、これらの平面が常に完全な正方形であり、立方体の回転に合わせて移動しますが、回転は親ではなくワールドにロックされることです。
では、子の親の回転を元に戻すにはどうすればよいでしょうか? ここで私が見逃しているクレイジーな数学は何ですか?
この例ではポイント スプライトを使用できることはわかっていますが、最終的にはポイント スプライトではうまくいかない、より複雑なニーズを念頭に置いています。そのため、実際の 3D オブジェクトでこれを行う方法を理解する必要があります。
編集:これは、各軸だけで機能します。親が X でのみ回転する場合、子の X 回転でそれを反転させることができます。Z だけでも同じですが、変化を開始してから X と Z の両方を反転すると、すべてがぎこちなくなります。