A-FRAMEのサンプル集[日本語版]


English Jp

A-Frameとは?

A-Frameは、VRやXRに対応したJava Scriptライブラリです。

通常はUnityなどでないとMeta Quest 2用コンテンツは作れません。 しかしこのライブラリを使えばウェブベースでVR用コンテンツが作れるという優れものです。

使い方も非常によく練られていて、箱やシリンダーといったものをタグで記述するだけで作れます。 これなら比較的HTML初心者の方でもハンドリングしやすいと思います。

公式サイト、ライブラリはこちら。
  • A-Frame
  • aframe-physics-system

    使い方は?

    クロームやエッジのようなブラウザで利用できます。

    右下のVRボタンを押すとVRモードになります。 VRモードにすれば、メタクエスト2などのヘッドセットでは360度全面が被われることになります。

    VRモードを解除するには、コントローラのメニューボタンを押しましょう。


    A-frameサンプル集

    各サンプルを実行後、ソースを見ると理解しやすいと思います。

    立方体

    まずはAFrameのライブラリをロードしておきます。
    <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」というタグを使います。
    <a-sphere position='0 2 -2' radius='0.5'></a-box>

    More Objects Sample


    360度画像


    「a-sky」というタグを使うと、好きなJPEG画像を360度背景として貼り込めます。
    <a-sky src='data/test.jpg' rotation='0 0 0'></a-sky>


    360 Degree Picture Sample



    霧は「a-scene」のプロパティ値としてセットできます。
    <a-scene fog='type: linear; color: #AAA; far:5;'>


    Fog Sample


    文字


    「a-text」で文字をセット。文章はValue属性で指定します。 うちでは日本語は表示できませんでした。
    <a-text position='-1 1.25 -3' value='Hello, World!' color='black'></a-text>


    Text Sample


    VRモード


    「af.is('vr-mode')」を使うと現在VRモードかどうかを判定できます。 サンプルではタイマーを使ってVRかどうかチェックしています。

    Scene Status Sample


    クリック(1)


    「addEventListener」でマウスダウン、マウスアップのイベントを取得できます。

    Mouse Click Sample 1


    クリック(2)


    オブジェクトごとに反応を変えることもできます。 サンプルではクリックされた物体の色が変わります。

    Mouse Click Sample 2


    Oculusコントローラ


    オキュラスのコントローラに対応しています。 コントローラの位置やボタンといった情報を取得できます。

    物体がコントローラーでグラブ出来るようにするには「grabbable」という属性を追加します。
    <a-box hoverable grabbable stretchable draggable dropppable position='0 0 -1'></a-box>


    Oculus Controller Sample


    物理属性


    「aframe-extras」を追加すると、フィジックス、つまり物理属性を適用できます。

    Physics Sample


    更新履歴

  • 2022/7/18 日本語版作成.
  • 2022/4/5 マイナーアップデート.
  • 2021/10/13 ベータ公開
    Program was made by akYip(Twitter || YouTube).