オリジナルポストカードは”こちら”で好評発売中!

A-Frameを使ってみたい1 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>     

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

 シーン(a-scene)の中の世界

GlitchでChangeURL”をクリックして、URLを取得、ブラウザで見た画面です。

実はカメラを引くと、こんな妙な世界なので、上記に載せてきた各属性の値は、良い参考とは言えないのでご了承ください。

 A-Frame Inspector がやっと出せた

以前、AR.js を使ってみたい2 A-Frameの続き、の時点では出し方が分からなかった A-Frame Inspector が出せました。やったぁ。

Git Hub/A-Frame Inspector : aframvr/aframe-inspector
参考サイト:
WebVRフレームワークA-Frameで、雪降る街の景色を作ってみました

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です