奥会津只見 イラスト美術館 参考ビデオ：What Is A-Frame? (A-Frame Tutorial – WebVR) から
自身のUdemyのA-Frameコースのコンテンツの一部を、YouTubeチャンネルに公開されている方の”Learn A-Frame (WebVR)”プレイリストを見ながら進めています。詳しくはリンク先をご覧ください。
1.2.0 › INTRODUCTION＞Introduction
0.3.0 › CONCEPTS AND API＞Entity-Component-System
A-Frameは、three.jsのための強力なエンティティコンポーネントシステムのフレームワーク。three.jsはクロスブラウザのJaveScriptライブラリで、WebGL APIを使い、ウェブブラウザ上でプラグインなしで3Dのアニメーションコンピュータグラフィックスを作成したり表示することができる。A-Frameを使用することにより、WebGLを知らなくても、HTMLで3DやWebVRのシーンを制作できる。A-Frameは、React.jsやjQuery、Vue.jsなどのようなライブラリやフレームワークとも互換性がある。A-Frameは、殆どのヘッドセット、デスクトップPCやスマートフォンでも動作する。
A-Frame：ゲーム開発でよく見られる、複雑な継承ツリーよりもコンポーザビリティを重視した「ECS（Entity-Component-System Pattern）」をベースとした、VR体験を構築するためのウェブフレームワーク。3D定型文、VRセットアップ、デフォルトコントロールを担い、インストールもビルドも必要なし。ベースとなるHTMLは氷山の一角に過ぎず、開発者はJavaScript、DOM API、three.js、WebVR、WebGLに無制限にアクセスすることができる。WebVRのためにゼロから最適化されていて、3Dオブジェクトの更新はすべてメモリ内で行われ、ゴミやオーバーヘッドがほとんどない。 ECS：再利用可能なさまざまなコンポーネントをエンティティのソケットに接続することで、リッチな動作を持つ複雑なエンティティを構築できる。従来の継承では、オブジェクトを拡張する場合、手動で新しいクラスを作成する必要があった。 エンティティ：本質的に何もせず、何もレンダリングしない汎用オブジェクト。IDとコンポーネントのコンテナのみで構成される。 コンポーネント：外観、動作、機能を提供するためにエンティティに接続される再利用可能なモジュール。コンポーネントは、オブジェクトのプラグアンドプレイ。ジオメトリ、マテリアル、ライト、アニメーション、モデル、レイキャスター、シャドウ、ポジショナルオーディオ、テキスト、主要なヘッドセット用コントロールなど、A-Frameのコアコンポーネントを使ってすぐに使用できる。さらに、環境、状態、パーティクルシステム、物理、マルチユーザー、海(?)、テレポーテーション、スーパーハンド、拡張現実など、何百ものコミュニティ・コンポーネントを利用できる。 システム：グローバルなスコープやサービス、コンポーネントのクラスの管理を提供する。 その他参考： エンティティ・コンポーネント・システム クロスブラウザ 【cross browser】 DOM の紹介 そもそもDOMとは何か
参考ビデオ：Installation And Testing (A-Frame Tutorial – WebVR)
1.2.0 › INTRODUCTION＞Installation
Code Editors in the Browser
A-Frameの始め方は様々だが、オンラインコードエディタが始めやすい。（前回A-Frameを使ってみたい1でアカウントをとった）Glitchの場合、a-frameで検索すると、ベーシックなA-Frameのプロジェクトを検索でき、Remix（既存のプロジェクトを自分のアカウントにコピーして使えるようにすること）ができる。
自分でローカルサーバを立ててプロジェクトを作ることもできる。例えば、 MongooseやXAMPPのようなアプリケーションをダウンロードして、好きなエディタを組み合わせる。起動しているサーバのローカルURLとポートを使ってA-FrameプロジェクトをWebブラウザ上で開くことができる。A-Frameを公開するサイトは、WebVR APIのに従い、SSL（https）で提供する必要がある。
Mongoose（MongoDB）：C言語で書かれたシンプルなHTTPサーバ/Webサーバ。 XAMPP：Apache（Webサーバソフトウェア）ディストリビューション。Apache・MariaDB・PHP・Perlが入っている。 その他参考： XAMPP環境でMongoDBを扱う 初心者向け！XAMPPの基礎知識とインストール方法 Web業界で使われるXAMPPとは？特徴やメリット、注意点を解説 WindowsでMongoose 3.2で色んな言語でCGIしてみた mongooseを使ってmongoDBを記述する 今後参考： ポート番号について SSL/TLSとは? 概要と仕組みを簡単説明 今回参照している動画では、Webサーバとしても使用できるBracketsというテキストエディタを使用しています。GlitchでHTMLを書き換えるとプレビュー画面がデフォルトに戻るのに、チュートリアルの画面ではHTMLを書き換えてもプレビュー画面の見え方が変わらなかったので、オンラインコードエディタの仕様の違いなのかと、Bracketsを試そうとしたら、数ヶ月前の悲しいニュースを見てしまったので、Glitchで継続。 参考： 2021年9月1日、Adobeが「Brackets」のサポートを終了！推奨エディタ「VisualStudioCode」に乗り換えよう
headタグの中に、A-Frameをscriptタグで囲んで記述することでA-Frameをインストール。この時点でのバージョンは1.2.0。
1.2.0 › GUIDES>Building a Basic Scene
Starting with HTML
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>htmlファイルに a-sceneを追加すると、プレビュー画面右下にVRモードボタンが現れ、A-Frameがインストールされていることが分かる。
<body>
<a-scene></a-scene>
</body>
シーンにはまだ何もないので真っ白い画面だが、Chromeでデベロッパーツールを開くと、実際にシーンがあり、サイズや、VRモードボタン、いくつかのエンティティ（デフォルトのカメラやライト）が確認できる。
シーン <a-scene></a-scene>
VRモードボタン
a-entity カメラ、ライト
参考ビデオ：basic Primitives And HTML Attributes (A-Frame Tutorial – WebVR)
ボックス（プリミティブの１つ）を入れてみる。
<body>
<a-scene>
<a-box></a-box>
</a-scene>
</body>しかし、何も見えない。
何も見えないのは、カメラがファーストパーソンビュー（一人称視点）のためのようで、前回A-Frameを使ってみたい1で使えるようになったA-Frame Inspectorで見る限り、カメラは（0 1.6 0）、ボックスは（0 0 0）のよう。
参考/引用： ファーストパーソンゲームとサードパーソンゲーム：違いは何ですか？
ただ、そもそも、ボックスもデフォルトの白色で、３D空間を照らすライトもデフォルトの白色、ウェブページ上のディスプレイも背景が白色なので、例え見える位置にあったとしても見えにくい。
先ず、VRモードボタンでVR表示に変え、背景を黒色にしておく。マウスを押しながらドラッグして下の方へと角度を変えると、足元付近に白いボックスが現れてくる。ボックスは、キーボードのWASDキーで動かすことができる。EscapeキーでVR表示を終了。
※下記の動画は、既に一度、ボックスが正面に見えるように視点を移動しておいたものです。
ライトとの位置関係で、白い背景でもボックスの影になる面は見えるようになるのかな。ドキュメントだとカメラは（0,0,0）になっている気がしますが、どの道どちらもZ軸で被っているで、デフォルトで見えないのは変わらないとは思うのですが。 この段階で、VR背景のデフォルトが黒色で見えやすいからとVRで確認させる流れが面白いし、チュートリアルとしてよく作られている感じがする。
シンタックスを見ると、プリミティブが使いやすい HTML 要素として記述されている。
<body>
<a-scene>
<a-box></a-box>
</a-scene>
</body>概要で述べたように、A-Frameはthree.jsのエンティティコンポーネントシステムのフレームワークである。ボックスプリミティブは、デフォルト値を持つコンポーネントのプリセットがバンドルされた、セマンティック名を持つエンティティに過ぎない。そのため、このボックスは白色で特定のサイズ（デフォルトはwidth=1,height=1,depth=1）を持っている。
シンタックス 【syntax】：仕様として定められた文法や表記法、構文規則などのルール。シンタックスはコードが形式的に言語仕様に従って記述されているかどうかを表す概念だが、これと対比して、その表す意味や内容のことを指す場合は「セマンティクス」（semantics：意味論）という用語を用いる。 セマンティック 【semantic】：形式や構造と対比して、人間にとっての意味を指し表す際に用いられる用語。 参考/引用： シンタックス（syntax）とは - IT用語辞典 e-Words セマンティック（semantic）とは - IT用語辞典 e-Words
次回は、HTMLアトリビュート（属性）を追加して外観を変更するところから。
