ローテーション

回転成分は、エンティティの向きを度数で定義する。pitch (x)、 yaw (y)、roll (z) の3つの数値で空間的に区切られ、回転の度合いを示します。

すべてのエンティティにはローテーションコンポーネントを持ちます。

# Example

<a-entity rotation="45 90 180"></a-entity>

# 値

A-Frameは右手座標系を採用しています。右手の親指を正の軸に合わせると、手は回転の正の方向にカールします。

Axis	Description	Default Value
x	ピッチ、X軸に沿った回転です	0
y	ヨー、Y軸に沿った回転です	0
z	ロール、Z軸に沿った回転です	0

# 関連する回転

子エンティティは親エンティティからワールドスペースの回転を継承します。このシーンを考えてみましょう。

<a-entity id="parent" rotation="0 45 0">
  <a-entity id="child1"></a-entity>
  <a-entity id="child2" rotation="15 45 30"></a-entity>
</a-entity>

ワールド空間における#child1の回転は0 45 0となります。ローカルな親の空間では、#child1の回転は0 0 0となります。 #child2のワールド空間の回転は、親エンティティとの回転値の合成により、15 90 30となります。親のローカル空間では、#child2 の回転は 15 45 30 になります。

# 回転の更新

パフォーマンスと人間工学の観点から、three.js Object3D (opens new window) .rotation オイラーeuler (opens new window) (ラジアン単位) と .setAttribute を使って、直接回転を更新することをお勧めします。

この方法は、すべての[オイラーユーティリティ][eualer]にアクセスできるので簡単で、.setAttributeのオーバーヘッドをスキップし、回転を設定するためにオブジェクトを作成する必要がないのでより高速です。

// With three.js
el.object3D.rotation.set(
  THREE.Math.degToRad(15),
  THREE.Math.degToRad(30),
  THREE.Math.degToRad(90)
);
el.object3D.rotation.x += Math.PI;

// With .setAttribute (less recommended).
el.setAttribute('rotation', {x: 15, y: 30, z: 90});

# 回転を取得する

three.jsレベルでの更新は、entityEl.getAttribute('rotation');を実行しても、A-Frameに反映されるようになっています。.getAttribute('rotation')を呼び出すと、A-Frameはラジアンと度から変換し、x/y/zプロパティを持つ通常のJavaScriptオブジェクトを返します。

カメラの位置と回転を取得するも参照してください。

# 変形の順番

変形は以下の順番で適用されます。

← レンダラースケール →