A-FRAMEのサンプル集[日本語版]
English
JpA-Frameとは?
A-Frameは、VRやXRに対応したJava Scriptライブラリです。通常はUnityなどでないとMeta Quest 2用コンテンツは作れません。 しかしこのライブラリを使えばウェブベースでVR用コンテンツが作れるという優れものです。
使い方も非常によく練られていて、箱やシリンダーといったものをタグで記述するだけで作れます。 これなら比較的HTML初心者の方でもハンドリングしやすいと思います。
公式サイト、ライブラリはこちら。
使い方は？
クロームやエッジのようなブラウザで利用できます。右下のVRボタンを押すとVRモードになります。 VRモードにすれば、メタクエスト２などのヘッドセットでは360度全面が被われることになります。
VRモードを解除するには、コントローラのメニューボタンを押しましょう。
A-frameサンプル集
各サンプルを実行後、ソースを見ると理解しやすいと思います。立方体
まずはAFrameのライブラリをロードしておきます。
Simple Box Sample
<script src='https://aframe.io/releases/1.2.0/aframe.min.js'></script>'a-scene'というタグではさむとシーンが作成されます。
<a-scene>...</a-scene>箱を追加するときには'a-box’というタグを使います。 位置、色、回転などはタグの中のパラメータで指定できます。
<a-box position='0 2 -2' rotation='0 45 0' color='#4CC3D9'></a-box>
Simple Box Sample
いろんな物体
平面や円錐なども利用できます。
例えば球は「a-sphere」というタグを使います。
More Objects Sample
<a-sphere position='0 2 -2' radius='0.5'></a-box>
More Objects Sample
360度画像
「a-sky」というタグを使うと、好きなJPEG画像を360度背景として貼り込めます。
360 Degree Picture Sample
<a-sky src='data/test.jpg' rotation='0 0 0'></a-sky>
360 Degree Picture Sample
文字
「a-text」で文字をセット。文章はValue属性で指定します。
うちでは日本語は表示できませんでした。
Text Sample
<a-text position='-1 1.25 -3' value='Hello, World!' color='black'></a-text>
Text Sample
Oculusコントローラ
オキュラスのコントローラに対応しています。
コントローラの位置やボタンといった情報を取得できます。
物体がコントローラーでグラブ出来るようにするには「grabbable」という属性を追加します。
Oculus Controller Sample
物体がコントローラーでグラブ出来るようにするには「grabbable」という属性を追加します。
<a-box hoverable grabbable stretchable draggable dropppable position='0 0 -1'></a-box>
Oculus Controller Sample
更新履歴
Program was made by akYip(Twitter || YouTube).