1. A-Frame.jsとは?

ウェブブラウザでバーチャルリアリティ (VR) 体験をすることができるライブラリとして,A-Frame.jsがあります。JavaScript等を書かずにマークアップ言語で3DVR空間を構築することができるようです。

A-Frame - Make WebVR

A-Frameを使った基本的なデモの作成 - ゲーム開発 | MDN

2. lab.jsでA-Frame.jsを使うには

lab.jsでA-Frame.jsを使う方法はとても簡単でした。以下のページの「Introduction」のデモをlab.js Builder上で動かしてみます。

2. 1. lab.js Builderに環境をセットアップする

セットアップの方法は他のライブラリを使用するときと同じです。lab.js Builderの設定アイコン(右端)をクリックします。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b3425e4c-2e06-4e12-986b-a8dfbe147740/Untitled.png

HTMLタブを選び,使用するライブラリのリンクを貼り付けます。

Untitled

具体的には以下のような感じです。

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

次は,下側のタブメニューの「HTML」を展開して「HTML Screenコンポーネント」を追加します。このコンポーネントは「Content」に直接HTMLを入力することが出来ます。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/9dcfcb06-9f6c-4868-8697-eb702ffdb183/Untitled.png

2. 2. 刺激を描画するには?