奥会津只見 イラスト美術館 参考ビデオ：Scale, Relative Scale, And Reflection (A-Frame Tutorial – WebVR) から
自身のUdemyのA-Frameコースのコンテンツの一部を、YouTubeチャンネルに公開されている方の”Learn A-Frame (WebVR)”プレイリストを見ながら進めています。詳しくはリンク先をご覧ください。
<!-- 黄色の円 -->
<a-circle color="#FFC107"
side="double"
position="-2 1 -7">
</a-circle>先ず、黄色の円で、エンティティの拡大縮小の仕方を見てみる。デフォルトの値はscale=”1 1 1″。
この場合、サイズを2倍にしたければ、XとYを2にして、scale=”2 2 1″にすればよい。
サイズを3倍の表現が正しいのか不明ですが、話の流れ的には重要な点ではないので進む。
<!-- 黄色の円 -->
<a-circle color="#FFC107"
side="double"
position="-2 1 -7"
scale="2 2 1">
</a-circle>しかし、3Dオブジェクトを適切な方向にスケーリングするのは難しい場合がある。いくつか例を見ていく。
今度はシリンダで試してみる。スケールのデフォルトはscale=”1 1 1″。
<a-cylinder color="#616161"
height="2"
radius="2"
segments-radial="6"
open-ended="true"
side="double"
position="0 1 0"
rotation="0 -90 90"
scale="1 1 1">
</a-cylinder>デフォルトのscale=”1 1 1″から、横に長くしようと、Xの値を2（scale=”2 1 1″）にすると、何故か縦に長くなってしまう。
更に、本来なら、高さを高くしようとする場合、Yの値を大きくするが、この場合、scale=”2 1 1″から、scale=”2 2 1″とすると、Z軸の奥行きが広がってしまう。
これは、この前回の回転の項目で、回転（rotation=”0 -90 90″）を適用しているためである。
・Z軸まわりの回転
先ず、Z軸周りに90°回転している。つまり、右手の法則により、親指を自分に向けた状態でシリンダを反時計回りに回転させている。これは、X軸とY軸を反時計回りに90度回転させていることになる。
下記動画 2分43秒辺りから参照：X軸とY軸の両方が反時計回りに90度回転し、新しい位置に移動する。
この時、X軸はワールド空間のY軸と同じ方向になり、Y軸はワールド空間のX軸と同じ方向になっている。
・Y軸まわりの回転
また、更に、ワールド空間のY軸を中心に、マイナスの回転も適用している（rotation=”0 -90 90″）。この場合の回転方向は、親指を下に向けることで確認でき、時計回りに90°回転していることになる。
同じ動画 3分02秒辺りから参照：シリンダのY軸とZ軸が、ワールド空間のY軸周りに、時計回りに回転する。
これにより、シリンダのY軸は、ワールド空間のZ軸の位置に移動している。
ローカル空間：親ノードの原点と軸が基準（Unityのインスペクターに表示されている座標） 参考： 【初心者Unity】ワールド空間とローカル空間 ワールド空間、オブジェクト空間、およびローカル空間 基本の 3D理論の説明
<a-cylinder color="#616161"
height="2"
radius="2"
segments-radial="6"
open-ended="true"
side="double"
position="0 1 0"
rotation="0 -90 90"
scale="1 1 1">
</a-cylinder>ワールド空間のY軸に沿ってシリンダを高くしたい場合は、シリンダのscaleコンポーネントのX軸の値を変える。（scale=”2 1 1″）
さらに、元のシリンダのサイズを2倍にするには、scaleコンポーネントのZの値、すなわち、ワールド空間のXの値を2に変更する。（scale=”2 1 2″）
そして、もしトンネルのように奥行きを出したい場合は、ワールド空間のXの値、すなわちscaleコンポーネントのYの値を増やす。（scale=”2 2 2″）
今度は親のエンティティである緑色のパネルにscaleコンポーネントを追加していく。この場合、チャイルドとなるグレーの円も、親と同じ変形が起こることが予測される。
しかし、ここで rotationに注目すると、既に緑色のパネルをX軸周りに90°回転させている（rotation=”90 0 0″）ため、スケールの値を変えるとワールド空間で考えたものとは違った結果になる。
<!-- 緑のパネル 親のエンティティ -->
<a-box color="#689F38"
width="4"
height="2"
depth="0.2"
position="0 1 -7"
rotation="90 0 0"
scale="1 1 1">
<!-- グレーの円 子のエンティティ -->
<a-circle color="#333333"
side="double"
position="2 0 0"
rotation="90 0 0">
</a-circle>
</a-box>動画に戻り、座標を確認する。
・X軸まわりの回転
X軸周りに90°回転させた場合、シリンダーのY軸は、ワールド空間のZ軸と同じ方向になり、Z軸はワールド空間のY軸と同じ方向になる。
動画 5:23 シリンダのY軸とZ軸が、ワールド空間のX軸周りに、時計回りに回転する。
もしこれら親子両方のエンティティを、ワールド空間のY軸に沿ってスケールしようとする場合、実際には、親エンティティのscaleコンポーネントのZ軸の値を変える必要がある。
Z軸の値を（scale=”1 1 2″）に変えると、ワールド空間のY軸方向に円が伸びる。
灰色のチャイルドが目立ちますが、緑のボックスも大きくなっています。
動画 6:07
X軸に関しては何も変化していないため、X軸方向に沿って親子両方のエンティティのスケールを変えたい場合は、そのままX軸のスケールコンポーネントを参照すればよい。緑のパネルのXの値を2にすると（scale=”2 1 2″）、ワールド空間のX軸に2を与えていた黄色い円と同じようにふるまう。
<a-box color="#689F38"
width="4"
height="2"
depth="0.2"
position="0 1 -7"
rotation="90 0 0"
scale="2 1 2">
<a-circle color="#333333"
side="double"
position="2 0 0"
rotation="90 0 0">
</a-circle>
</a-box>正の値でスケールを小さくしていく限りは、どうなるかは直感的にわかるが、では、スケールをそのまま小さくしていき、負の値までいったらどうなるか。
緑のパネルのX軸の値を、2→1→0.5→ -0.5→ -1と変えてみる。
ビデオと違ってリフレクションなし
ビデオと違ってリフレクションなし
この場合、グレーと黄色の２つの円がZ軸の値で重なってしまうので、先ず、黄色の円のpositionコンポーネントのZ軸のマイナスの値を増やし（position=”-2 1 -8″）、黄色の円をグレーの円の後ろに移動する。
【ビデオは】スケールコンポーネントで負の値を使うと、3Dオブジェクトではリフレクションと呼ばれる現象が起き、緑のパネル部分に近づいて見てみると、まるで靴箱の中身を見ているような状態になっていて、グレーの円も内側に入っているように見える・・・
・・・はずのようだけど、なってない。バージョンアップで変わったのかな？ そこまで重要でもないとの判断で、解明せず次へ進みます。ビデオの当初はv0.7.0（コースの方は途中でv1.0.4にアップデートされているようですが）、使用しているのはv1.2.0です。
黄色い円は、ポジションで学んだときのように、緑のパネルとオーバーラップした状態になっている。
オーバーラップは相変わらずなってます。
【ビデオは】また、ボックスを見ると、手前側の２つの面が見えず、透明のようになっている。反対側に周ると、今度は反対側から見て手前の2つの面が透明になり、先ほど見えなかった他の2つの面が見えるようになる。これは、緑色のパネルが裏返しになっているために起こる現象で、灰色の円を片側からしか見ることができなかった時と同じように、sideの値をdoubleに設定（side=”double”）することで、ボックスは通常の外観に戻る・・・
・・・はずですが、元々裏返しになっていなかったので、変わらないように見える。
<a-box color="#689F38"
side="double"
width="4"
height="2"
depth="0.2"
position="0 1 -7"
rotation="90 0 0"
scale="2 1 2">
<a-circle color="#333333"
side="double"
position="2 0 0"
rotation="90 0 0">
</a-circle>
</a-box>次回はテクスチャです。
