A-Frameを使ってみたい１　3D/AR24 - 奥会津只見イラスト美術館

AR.js Studioを使ってみたい、から始まったのですが、掘り下げていくと、A-Frameを学ぶのが良さそうなので（Java Scriptは正面から取り組んで挫折中）、その後のAR.js を使ってみたい、からタイトル名を変更して、A-Frame主体でしばらくは進めていこうと思います。

　Glitchを始めてみた

A-Frame：HTMLを使ってA-Frameエンティティを使うWebGL 上に構築されたJSライブラリ。

VS-Codeはインストールしてありましたが、オンラインエディタの方が作りながらの確認が簡単そうで、取り急ぎのサーバーの用意が必要ないというのは助かる。いくつかのチュートリアルサイトでもGlitchを使っていたので、アカウントを取ることにしました。

参考サイト：
A-Frameを使った基本的なデモの作成 MDN
A-Frameをかじる本
 ブラウザだけで完結するウェブアプリ作成環境 Glitch
初心者向けWebVR勉強会 part1
1.2.0 › INTRODUCTION＞Installation A-Frame

ここからは参考サイトと、この動画を参考にしながら進めていこうと思います。
参考動画：
Getting started with A-Frame Tutorial

　A-Frameのscriptを追加

A-Frame scriptを追加。CDNなのでダウンロードなども必要なし、とのこと。
1.2.0 › INTRODUCTION＞Installation

HTML

<head>
  <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>

　シーン（a-scene）を追加

全てをa-sceneでラッピングする必要があるので、a-sceneをA-Frameのbody内に追加。VRの世界はこのa-sceneの中に創り出されます。
1.2.0 › INTRODUCTION＞HTML & Primitives

HTML

<body>
    <a-scene>
      
    </a-scene>
</body>

シーンはできたけど、まだ何もないので真っ白。

（headタグ内は、GlitchのBlank Websiteで自動的に作られるものから、あまり変更していないだけなので気にしないでください。）

　地面（a-plane）を追加　〜プリミティブ、エンティティ、アトリビュート

地面などで使われる<a-plane>はプリミティブの項にあります。
プリミティブは原始的なという意味ですが、グラフィックスでは、直線、曲線、多角形などの基本的な要素のことで、3DCGソフトなどでは球体や立方体などが用意されていて、これらを組み合わせて複雑な形をモデリングしていくのでこう呼ぶ様です。

エンティティは任意の要素で、オブジェクトだけでなく、camera、light、sound sourceなどもエンティティになります。エンティティはいくつかのアトリビュート（属性）を持つことができ、<a-plane>のアトリビュートのリストと、そのデフォルト値は以下のリンクより確認できます。
1.2.0 › PRIMITIVES<a-plane>

HTML

  <!-- エンティティが持っているアトリビュート（属性）
  アトリビュートは イコール(=)と一緒に書かれているもの。
  ほとんどのプリミティブシェイプでこれらのアトリビュートが使用できる。
  ex) <script src=""> </script>：src=""はscriptエンティティのアトリビュート
  position
  rotation
  color
  height
  width
  radius
  -->

たくさんの人が使うであろう、地面に平行に使いたい場合は参照のこちら。X軸に対し−90度回転させるようです。

　地面（a-plane）を追加　〜A-Frameの単位

ここで、このページの手の指を参照。
1.2.0 › GUIDESBuilding a Basic Scene

A-Frame内の単位はメートル。もし高さのアトリビュートがheight=”20″だったら、20メートル。rotation=”-90 0 0″の値は−90度です。もしオブジェクトをカメラの前に表示させたかったら、z軸をマイナス方向に動かす。

HTML

<a-plane rotation="-90 0 0"></a-plane>

　地面（a-plane）を追加　〜色をつける

地面の色はcolor pickerで適当に。綺麗な青、これにしよう。

rotationだけだと何も現れず、colorやheightの属性を加えたら出てきました。

HTML

<a-scene>
      <a-plane rotation="-90 0 0" color="#36d5f5" height="20" width="20"></a-plane></a-scene>

　空（a-sky）を追加　〜色の名前（orange）で指定　

次に<a-sky>を入れてみます。
1.2.0 › PRIMITIVES<a-sky>

しまった、地面を青色にしてしまったので、海の夕日のイメージで。

HTML

<a-scene>
    <a-sky color="orange"></a-sky>
    <a-plane rotation="-90 0 0" color="#36d5f5" height="20" width="20"></a-plane>
</a-scene>

　空（a-sky）を追加　〜radius属性も追加

radiusを入れてみたら、地球になった。

HTML

<a-scene>
    <a-sky color="orange" radius="10"></a-sky>
    <a-plane rotation="-90 0 0" color="#36d5f5" height="20" width="20"></a-plane>
</a-scene>

　球体（a-sphere）を追加

次に、a-sphere（球体）を入れてみる。
ここのa-sphereのExampleをコピペ。
1.2.0 › PRIMITIVES＞<a-sphere>

HTML

<a-scene>
    <a-sphere color="yellow" radius="5"></a-sphere>
    <a-sky color="orange" radius="10"></a-sky>
    <a-plane rotation="-90 0 0" color="#36d5f5" height="20" width="20"></a-plane>
</a-scene>

出ない。

　球体（a-sphere）を追加　〜カメラと方向

ここで、またこちらのページを参照。
カメラは（0 0 0）の位置にあるので、もしオブジェクトをカメラの前に表示させたかったら、z軸をマイナス方向に動かす。
1.2.0 › GUIDESBuilding a Basic Scene

HTML

 <a-scene>
    <a-sphere position="0 0 -10" color="yellow" radius="5"></a-sphere>
    <a-sky color="orange" radius="10"></a-sky>
    <a-plane rotation="-90 0 0" color="#36d5f5" height="20" width="20"></a-plane>
</a-scene>

夕日（？）が出てきた。

　球体（a-sphere）を追加　〜wireframe属性も追加

各々微調整して、土星に変えてみる。なるほど、それぞれにデフォルトの値があるから、他のオブジェクトと被ったりカメラから見えなかったりする場合があって、そういう場合はきちんと指定しないと見えないのですね。
1.2.0 › PRIMITIVES＜<a-ring>

HTML

    <a-sphere position="0 3 -5" color="yellow" radius="0.5"></a-sphere>
    <a-sky color="orange" radius="10"></a-sky>
    <a-ring position="0 3 -5" rotation="-95 70 0" color="teal" 
            radius-inner="0.7" radius-outer="1.5" wireframe="true"></a-ring>
    <a-plane rotation="-90 0 0" color="#36d5f5" height="20" width="20"></a-plane>
  </a-scene>

どうしても輪っかが思う様な角度になりませんでしたが、先ずはここまで。