奥会津只見 イラスト美術館 参考ビデオ：Image Textures And Materials (A-Frame Tutorial – WebVR) から
自身のUdemyのA-Frameコースのコンテンツの一部を、YouTubeチャンネルに公開されている方の”Learn A-Frame (WebVR)”プレイリストを見ながら進めています。詳しくはリンク先をご覧ください。
前回、A-Frameを使ってみたい８で行った方法とは異なるやり方で、外観を変えていく。
（水色のボックスは現在、メタルのボックスになっています）
<!-- 茶色のボックス 色は動画とは異なる値を入れています-->
<a-box color="#A0522D"
width="4" height="4" depth="4"
position="2 1.5 -9">
</a-box>16進数のカラー（#A0522D）はそのまま使用するのでコピーしておき、color属性を削除。代わりにmaterialコンポーネントを追加し、colorプロパティとその値（#A0522D）で塗りつぶすと、まったく同じ結果になる。
<!-- 茶色のボックス -->
<a-box material="color: #A0522D"
width="4" height="4" depth="4"
position="2 1.5 -9">
</a-box>このcolorの言い方の違いがこれなのかしら。 <a-box color（アトリビュート）="#A0522D"> </a-box> ーーーーーーーーーーーーーーーーーーーーーーーーーーー <a-box material="color（プロパティ）: #A0522D"> </a-box> アトリビュート/属性：ソフトウェアやデータ管理などの文脈では “property”(プロパティ)も「属性」と訳される場合があり、アトリビュートとほとんど同義のように用いられるが、HTMLのDOM操作のように両者に別々に意味が与えられて併用される場合もある。HTMLやXMLなどのマークアップ言語では、要素の持つ付加的な情報をタグの中に埋め込んだものをアトリビュートという。これをJavaScriptのオブジェクトの属性として表したものをプロパティという。 抜粋：アトリビュート 【attribute】 attr / 属性
茶色のボックス用のアセットとなる、brickテクスチャとbrickのノーマルマップも、アセットマネジメントシステムに追加する。
<!-- アセットマネジメントシステム -->
<a-assets>
<img id="metal-NRM" src="Textures/Metal_normal.jpg">
<img id="brick" src="Textures/Brick_albedo.jpg">
<img id="brick-NRM" src="Textures/Brick_normal.jpg">
</a-assets>ここで、プロパティを持つコンポーネントは、
material（コンポーネント）="color（プロパティ）: #A0522D"セミコロン（;）で区切る必要があり、
material（コンポーネント）="color（プロパティ）: #A0522D;
"DOMセレクタ形式で、id（#）を使用して画像テクスチャを参照、
material（コンポーネント）="color（プロパティ）: #A0522D;
src: #brick"
テクスチャに色が混ざらないようにマテリアルカラーをホワイトに設定する。
material（コンポーネント）="color（プロパティ）: #FFFFFF;
src: #brick"
今回はY軸、X軸ともにテクスチャを2回繰り返す。（repeat: 2 2）
むむ。動画と比べて細かいレンガ模様を選んでしまったらしく、めちゃ細かくなってしまった。もっとブロックの積み方がラフな感じの方が見た目にも分かりやすいかも。
ノーマルマップ追加前。
ノーマルマップも idを使用して参照。
しかし、前の段階で、画像テクスチャにリピートをかけている（repeat: 2 2）ので、ノーマルマップが正しく表示されていない。
そこで、ノーマルマップも同様に、normal-texture-repeatプロパティを追加（normal-texture-repeat: 2 2）。
metelのテクスチャ同様に、normal-scaleプロパティで Y軸をマイナスの値に設定すると・・ 凹凸が逆に見える感じになった。面白い。
このノーマルマップもnormal-scale: 1 1に戻します。
表面の粗さを設定。roughness: 0.1と、roughness: 0.9の場合。
roughness: 0.1 
roughness: 0.9
動画では、A-Frameを使ってみたい５ スケールで少し出てきた、リフレクションで少し遊んでいるようですが、 絶対値を取るように改定されたのか？、A-Frame v1.2.0ではやはりマイナスの値を入れても変化せず。YouTubeの解説動画のコメント欄に、"A-Frame1.2.0で試したところ、ネガティブでは「部屋」が出なくなった。コードを修正したのでしょう。"というコメントがあったので、そうだと信じて、この部分はスキップします。
新しく２つのプリミティブを追加。今度は球体を作成し、materialコンポーネントに、青色の値のcolorプロパティを追加、デフォルトの位置に、青い球体が現れた。
チュートリアル動画同様に、メタルボックスと球体のpositionコンポーネントの値を同じにすると、v.1.2.0では見えなくなってしまうため、ここではメタルボックスの少し手前に移動することにする。
ちなみに、メタルボックスと青い球体を同じポジションにして、メタルボックスの中に入っていくと青い球体が出現したので、それはそれで面白い。
ここでは、青い球体をposition=”-2 1.5 -7″に移動。
青い球体の半径をデフォルト値の1から0.5に変更し、球体をコピーして、ポジションコンポーネントのX軸の値をレンガのボックスに合わせ2に変更し、レンガのボックスの前に配置する。色は赤色に変える。
ボールに少し光沢を持たせたいので、両方のボールにroughnessを追加し、値を小さく（0.2）する。
このようにroughnessを使用できるのは、roughnessがA-frameのスタンダードマテリアルのプロパティの１つで、shaderプロパティによりデフォルトで設定されているためで、他にはflatがある。
赤い球体をflatマテリアルに設定してみる。
flatマテリアルはシーンのライティング状況に左右されない。これはあるシチュエーションではとても重要で、その辺りは別途改めて取り上げていく。flatマテリアルには、他にも有益なプロパティがあり、例えば、opacity（デフォルトは1）は色の濃さを調整出来る。
赤い球体をopacity: 0.5 に設定してみる。
マテリアル：materialコンポーネントは、実体に外観を与えるもので、色、不透明度、テクスチャなどのプロパティを定義することができます。 プロパティ：materialコンポーネントはいくつかの基本的なプロパティを持ちます。適用されるマテリアルタイプによって、さらに多くのプロパティを利用できます。 shaderプロパティ：どの素材を使うかを定義します。デフォルトはstandardです。flatマテリアル、または登録されたカスタムシェーダーマテリアルに設定可能です。 A-Frameのbuilt-inマテリアル standardマテリアル：デフォルトのマテリアルで、物理ベースのTHREE.MeshStandardMaterialを使用します。 flatマテリアル：THREE.MeshBasicMaterialが使用されます。シーンの照明条件による影響を受けず、画像や動画などの場合に便利です。シェーダーをフラットに設定します。 参考： v1.2.0 > COMPONENTS > material > Properties v1.2.0 > COMPONENTS > material > Build-in Materials
次回は、画像関連のプリミティブの予定です。
