前回のおさらい
前回用意したプロジェクトの構成と、役割を確認しておきます。
MyProject01/
├ assets/ (A-Frameで使用するファイルを格納します)
├ index.html(A-Frameを起動するファイルです)
├ main.js (A-Frameのプログラムを記述するファイルです)
"index.html"ファイル、"main.js"ファイルの順番に編集をしていきます。
(assetsフォルダの中にはまだ何も入っていません)
index.htmlの編集
index.htmlでは、A-Frameのライブラリ本体である"aframe.min.js"と、"aframe-environment-component.min.js"、そして実際にプログラムを記述していく"main.js"を読み込むタグを記述します。(次のソースをコピーしてもOKですよ)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
<script src="./main.js"></script>
</head>
<body>
<a-scene stats loading-screen="dotsColor: gray; backgroundColor: lightgray">
<a-sky color="#ECECEC"></a-sky>
<a-plane position="0 0 -5" rotation="-90 0 0" width="6" height="6" color="#7BC8A4"></a-plane>
</a-scene>
</body>
</html>
A-Frameのライブラリのロードには、CDN(Contents Deliverly Network)を使っています。
(URLから直接ダウンロードする事で、プロジェクトがコンパクトになりますね)
次にロードしている、"main.js"には様々な処理を記述していきます。
実行して確かめる
ファイルを保存したら、さっそくブラウザで実行してみましょう。(HTMLファイルの上にマウスを置き、右クリックして"OpenWithLiveServer"でしたね)
すると、ブラウザが立ち上がり次の様な画面が現れます。(やりました!!)
画面左上に表示されている"stats"に注目してください。
ここには、A-Frameの実行に関する情報が表示されています。
特に、"fps"の数字がとても重要です。(ゲームをやる人にはお馴染みのパラメータですね)
この値が小さくなりすぎない様にしながら開発を進めていきます。
マウスのドラッグでカメラの方向制御、キーボードの"WASD"でVR空間を移動する事もできるので試してみましょう。
A-Frameで使用するタグ
A-Frameは、VR空間上に様々なコンテンツを表現する事ができます。
先ほど記述したHTMLファイルを思い出してください。
"a-..."というタグを見つける事ができるでしょうか?
A-Frameでは、基本的にこれらのタグを組み合わせてVR空間を作っていきます。
(とても簡単ですね!!)
a-sceneタグ
A-Frameの中でも最も重要なタグが、"a-scene"タグです。
こちらのタグは、VR空間そのものを表すタグになります。
様々なオブジェクトは、このタグの中に記述していく事になります。
<a-scene></a-scene>
a-skyタグ
VR空間の背景の色を決めるタグが、"a-sky"タグです。
アトリビュートである"color"に値を指定する事で、空間全体の色(空の色)を決める事ができます。
(他にもありますよ)
<a-sky color="#CCCCCC"></a-sky>
a-planeタグ
"a-plane"タグは、四角い平面を作るタグです。
このタグには様々なアトリビュートが用意されています。(他にもありますよ)
| アトリビュート名 | 記述例 | 意味 |
|---|---|---|
| position | 0 0 -5 | オブジェクトの座標 |
| rotation | -90 0 0 | オブジェクトの回転角度 |
| width | 6 | オブジェクトの横幅 |
| height | 6 | オブジェクトの高さ |
| color | #7BC8A4 | オブジェクトの色 |
<a-plane position="0 0 -5" rotation="-90 0 0" width="6" height="6" color="#7BC8A4"></a-plane>
a-boxタグ
"a-box"タグは、立方体を作るタグです。
このタグには様々なアトリビュートが用意されています。(他にもありますよ)
| アトリビュート名 | 記述例 | 意味 |
|---|---|---|
| position | -1 0.5 -3 | オブジェクトの座標 |
| rotation | 0 0 0 | オブジェクトの回転角度 |
| width | 1 | オブジェクトの横幅 |
| height | 1 | オブジェクトの高さ |
| color | #4CC3D9 | オブジェクトの色 |
<a-box position="-1 0.5 -3" rotation="0 0 0" color="#4CC3D9"></a-box>
a-sphereタグ
"a-sphere"タグは、球体を作るタグです。
このタグには様々なアトリビュートが用意されています。(他にもありますよ)
| アトリビュート名 | 記述例 | 意味 |
|---|---|---|
| position | -1 0.5 -3 | オブジェクトの座標 |
| radius | 1 | オブジェクトの半径 |
| color | #4CC3D9 | オブジェクトの色 |
<a-sphere position="0 1 -5" radius="1" color="#EF2D5E"></a-sphere>
a-cylinderタグ
"a-cylinder"タグは、円柱を作るタグです。
このタグには様々なアトリビュートが用意されています。(他にもありますよ)
| アトリビュート名 | 記述例 | 意味 |
|---|---|---|
| position | 1 0.5 -3 | オブジェクトの座標 |
| radius | 0.5 | オブジェクトの半径 |
| height | 1 | オブジェクトの高さ |
| color | #FFC65D | オブジェクトの色 |
<a-cylinder position="1 0.5 -3" radius="0.5" height="1" color="#FFC65D"></a-cylinder>
様々なタグ
A-Frameには他にも様々なタグと、そのそれぞれに対して利用できるアトリビュートが多数存在します。
必要に応じて、Docsから調べていきましょう。
3つのオブジェクトを並べてみる
最後に、VR空間に3つのオブジェクトを並べてみます。
ここで一つ、"Environment"を利用するとお洒落な空間を演出できます。
<a-entity environment="preset: default;"></a-entity>
全体のコードを載せておきますね。(こちらもコピーでいけますよ!!)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
<script src="./main.js"></script>
</head>
<body>
<a-scene stats loading-screen="dotsColor: gray; backgroundColor: lightgray">
<a-sky color="#ECECEC"></a-sky>
<a-entity environment="preset: default;"></a-entity>
<a-plane position="0 0 -5" rotation="-90 0 0" width="6" height="6" color="#7BC8A4"></a-plane>
<a-box position="-1 0.5 -3" rotation="0 0 0" width="1" color="#4CC3D9"></a-box>
<a-sphere position="0 1 -5" radius="1" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.5 -3" radius="0.5" height="1" color="#FFC65D"></a-cylinder>
</a-scene>
</body>
</html>
実行すると、次の様に3つのオブジェクトを確認する事ができます。(やりました!!)
次回は、様々な素材の読み込みとその表示についてのお話です。