スケール | A-FRAME

scaleコンポーネントは、エンティティの縮小、伸張、または歪曲変換を定義します。X軸、Y軸、Z軸の3つの縮尺（スケール）係数を取ります。

すべてのエンティティは、本質的にスケールコンポーネントを持ちます。

# 例

以下の例では、X方向は半分に縮小し、Y方向は同じ倍率を維持し、Z方向は2倍に伸ばしています。

<a-entity scale="0.5 1 2"></a-entity>

スケーリングファクターのいずれかを0に設定すると、A-Frameは無視できる値を代わりに割り当てます。

スケーリングファクターは負にすることができ、その場合は反射となります。

これの主な用途は、空間の球体です。空間の球体は、シーン全体を含み、その内側にテクスチャがマッピングされています。これを行うには、球体をZ方向に反射、つまり反転させます。

<a-entity geometry="primitive: sphere; radius: 1000"
          material="src: sky.png"
          scale="1 1 -1"></a-entity>

回転および位置成分と同様に、スケールはローカル座標系で適用され、ネストされたエンティティに乗算されます。

パフォーマンスと人間工学の観点から、three.jsの Object3D (opens new window)と .scale [Vector3vector (opens new window) と .setAttribute を使って、直接スケールを更新することをお勧めします。

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

// With three.js
el.object3D.scale.set(1, 2, 3);

// With .setAttribute (not recommended).
el.setAttribute('scale', {x: 1, y: 2, z: 3});

また、インクリメンタルアップデートも容易です。

el.object3D.scale.x += 1;
el.object3D.scale.multiplyScalar(2);
el.object3D.scale.sub(someOtherVector);

three.jsレベルでの更新を反映させるため、A-Frameでは、.getAttribute('scale')を実行すると、実際のObject3D.scaleベクターオブジェクトが返されます。戻り値を変更すると、エンティティ自体も変更されることに注意してください。

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