今見てくれてる人の数

ホンキートンク・スーダラブルース

ゆるコラム、oF、邦ロックや歌謡曲、小説の感想。ドラクエ、JavaScript、ドラゴンボール超など。湘南あたりを転がってる石コロのゆるゆる生きてく超雑多な軌跡です。

【WebVR日記2】A-Frameに入門。Hellow Worldしてみた!

先日、WebVRを作ってみたい。

A-Frameというフレームワークが気になるという記事を書きました。

Three.jsをゴリゴリ書く必要なく、HTMLでシーンが作れるそうです。

www.sudara-bluse.tokyo

 

今回は早速A-Frameを入門してみようと思います。

まずは情報収集😎    ARもブラウザとjsでいけるっぽいですね〜やってみたい!

qiita.com

 

 

Qitaの記事や本家サイトイントロダクションを参考にします。

本家サイト可愛い♡

f:id:sudara_bluse:20171030062125p:plain

https://aframe.io/docs/0.7.0/introduction/

 

qiita.com

 

A-Frameの特徴。

WebGLを知らなくてもhtmlタグでシーンを記述できる
>WebVRにデフォルトで対応している
レスポンシブなVRサイトが構築できる(Oculus Rift, CardBoard)
WebVRに特化した機能(注視点を自動選択する,など)を備える
MozVRが開発している(Firefox系)
なにげに物理ベースレンダリング(PBR)のマテリアル指定を採用
MITライセンスでソース公開されている <

 だそうです!

 

コードを書く

早速コード書きます。

index.html
<!doctype html>
<html>
  <head>
    <title>A-Frame</title>
    <script src="https://aframe.io/releases/latest/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <!-- ここにシーンを作っていく -->
<a-cube></a-cube>
</a-scene>
</body>
</html>

たったこれだけでCUBEができました!しかもVR機能付きでっす!

f:id:sudara_bluse:20171030063632p:plain

 

index.html
<!doctype html>
<html>
  <head>
    <title>A-Frame</title>
    <script src="https://aframe.io/releases/latest/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
<a-cube width="1" height="3.0" depth="0.5" color="yellow"></a-cube>
<a-sphere position="10 -0.5 -3" color="green"></a-sphere>

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

width、height、奥行き、色を指定してみました。

positionはx,y,z軸の座標を指定できるみたいです。

 

 

f:id:sudara_bluse:20171030064854p:plain

マウスでぐりぐり動かせました!

 

今回はここまで。

画像(<a-image>),動画(<a-video>)なども用意されているそうです。

動画やってみたい。

あとアニメーション。

 

続く!