camera.rotate.y は、予測可能な方法で左または右にパンします。
camera.rotate.y が 180 度の場合、camera.rotate.x は予想どおり上または下に見えます。
しかし、camera.rotate.y の値を新しい値に変更してから、camera.rotate.x の値を変更すると、地平線が回転します。
camera.rotate.x が変更された後に水平線の回転を調整するアルゴリズムを探しましたが、見つかりませんでした。
three.js では、オブジェクトの向きをオイラー回転ベクトルで指定できますobject.rotation
。回転ベクトルの 3 つのコンポーネントは、それぞれオブジェクトの内部 x 軸、y 軸、および z 軸を中心とした回転をラジアンで表します。
回転が実行される順序は で指定されobject.rotation.order
ます。デフォルトの順序は「XYZ」です。最初に x 軸を中心に回転し、次に y 軸、次に z 軸の順に回転します。
回転は、ワールド座標系ではなく、オブジェクトの内部座標系に対して実行されます。これは重要。したがって、たとえば、x 回転が発生した後、オブジェクトの y 軸と z 軸は通常、ワールド軸と整列しなくなります。この方法で指定された回転は一意ではありません。
したがって、たとえば、コードで指定した場合、
camera.rotation.y = y_radians; // Y first
camera.rotation.x = x_radians; // X second
camera.rotation.z = 0;
回転は、rotation.order
指定した順序ではなく、オブジェクトの に適用されます。
あなたの場合、rotation.order
「ヘディング、ピッチ、ロール」に相当する「YXZ」に設定する方が直感的かもしれません。
オイラー角の詳細については、ウィキペディアの記事を参照してください。記事で説明されているように、Three.js は Tait–Bryan 規則に従っています。
three.js r.61