「WebVR」の記事 - Crieit

A-FrameでVRモードに切り替える方法を追加する

2019-08-18T15:51:04+09:00

A-Frameはページ表示時にはVRモードではなくブラウザで表示するための通常の3Dモードで描画されており、右下のメガネボタンをクリックするとVRモードに切り替わる。

ただしこれを使わなくても適宜自由にVRモードに切り替えたりVRモードから脱出したりすることができる。

具体的にはsceneコンポーネントにそれらのメソッドが用意されている。

VRモードに切り替えるメソッド

例えばボタンをクリックしたときなどにVRモードに切り替えたい場合は下記のような形。

document.querySelector('a-scene').enterVR()

exitVRというメソッドもある。

イベント

VRモードに切り替わったり出たりした場合にイベントが発生するのでそのタイミングで処理を入れることも出来る。具体的にはenter-vrやexit-vrイベント。

他にもフォグ（霧のようなエフェクト）を入れたりもできるためちらっとドキュメントを見てみると面白い。

Scene – A-Frame

Oculus Questのコントローラの角度が謎

2019-07-03T22:06:49+09:00

A-FrameでOculus Questのコントローラを使う場合、oculus-quest-controlsコンポーネントを使うことができる。この動きに連動して銃を撃つようなアクションを作っていたのだが、どうもどうやっても角度が合わない。そのためちょっと調べてみたところ謎の角度になっていることがわかった。

ベースの角度

手を真下に下ろしているような状態がベースの角度となり、x, y, zともに0になる。

上下の動き

その状態からそのまま手を上に上げるとxの角度。段々と180に近づいていき、そのまま後ろに行くと-180度から-0に近づいていく。

左右の動き

次に真下の状態から左右方向に手を上げるとzの角度。手を右方向に上げていくと180に向かっていき、左方向に傾けると-180度に向かっていく。

yの傾き

yの傾きは、手を真下に下ろしたまま手の位置を固定したまま自分が手を中心に回るような動きとなる。これがちょっと不思議。

左回りに回転させると、段々と90度に近づいていく。ところが、90度を超えてからは今度はだんだんとそのまま0に近づいていく。右回りも同様で、段々と-90度に近づき、そこを経由して0に戻っていく。

ここの挙動が他と変わっているおかげで連動して生成する物体の傾きがどうしてもうまくあわなかったっぽい。

もしかしたら知っている人からすれば一般的な話なのかもしれないが、とりあえずメモ。

ちなみにダンプは適当にa-textを配置してそれに値をsetAttribute('value', value)して直接VR上で見た。

Oculus Questのコントローラでaframe-teleport-controlsを使う

2019-06-29T22:02:34+09:00

A-Frameには aframe-teleport-controls という、VR空間内を近くにテレポートしつつ移動するためのコンポーネントがある。

VR空間内は勝手に自分のカメラの位置が移動してしまうと乗り物酔いと同じ原理で酔ってしまう。そのためそれを避けるためテレポートが役立つ。

ただ、Oculus Questで試すとこのリポジトリにかかれているサンプルのコードだとデフォルトでは動かない。というのも、上記の画像のとおりにコントローラが違うためデフォルトで設定されているボタンが異なる。

下記のようにボタンを例えばトリガーボタンに変更したりすれば動作するようになる。これで簡単にワープすることができる。

        teleport-controls="cameraRig: #cameraRig; teleportOrigin: #head; button: trigger;"

TypeScriptでA-Frameのコンポーネントを書く

2019-06-24T19:48:11+09:00

TypeScriptを使っているプロジェクトでA-Frameのコンポーネントを書く時の方法。まだざっと試したところなのでおかしなところがあれば適宜調整が必要かも。

とりあえず型を入れる。

yarn add @types/aframe

これで適当なtsファイル内でAFRAME.registerComponentとかを実行しても未定義エラー等が発生しなくなるため定義できるようになる。

また、下記のようにimportして実行する方法もある。

import { registerComponent } from 'aframe'

registerComponent('my-component', {

コンポーネント内部で使うパラメータはオブジェクト内に定義すればいい。JavaScriptの場合だと、initメソッド内で初期化したりするが、それだと型エラーになるので要定義。

registerComponent('my-component', {
  hoge: true,
  fuga: 100,

というか、型定義のテストファイルに一通りのものが書かれている。

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/aframe/test/aframe-tests.ts

const Component = registerComponent('test-component', {
    schema: {
        myProperty: {
            default: [],
            parse() {
                return [true];
            }
        },
        string: { type: 'string' },
        num: 0
    },
    init() {
        this.data.num = 0;
        this.el.setAttribute('custom-attribute', 'custom-value');
    },
    update() {},
    tick() {},
    remove() {},
    pause() {},
    play() {},

    multiply(f: number) {
        // Reference to system because both were registered with the same name.
        return f * this.data.num * this.system!.data.counter;
    }
});

他にも色々書かれているのでこちらを参考にしていけばなんとかなるのではないかと思う。

プロパティの型を明示的に指定する場合は？

事前にinterfaceを定義する感じ？　ただこれだとメソッドも再定義しないといけないので非常に面倒。何か良い方法は無いのだろうか。

A-FrameでVRラジコンを作る

2019-06-17T23:27:42+09:00

前回3D空間でキーボード操作のラジコンを作ったが、それをOculusQuestのVR空間内でスティックで操作して遊べるようにしてみた。前回のは下記。

A-Frameでキーボード操作のラジコンを作ってみる

これにスティックによる処理を追加していく。

スティック操作による値を取得

左手右手の各コントロールコンポーネントはtracked-controlsというをベースとしており、これのaxismoveイベントを使うことでスティックの傾きを取得することができる。

そのためイベント受信用のコンポーネントを作り、それをhand-controlsに割り当てれば取得することができる。例えば下記のような感じで左手用、右手用のcar-controller-left, car-controller-rightコンポーネントを作った場合は下記のようになる。

コンポーネントは下記のような感じ。左手の上下でスピード、右手の左右でハンドルをさばく。

    AFRAME.registerComponent('car-controller-left', {
      init: function () {
        this.el.addEventListener('axismove', function (e) {
          const car = document.querySelector('[car]').components.car
          car.onAxisMoveSpeed(e)
        })
      }
    })

あとはもう面倒になったので傾きも使わず前回作った処理をそのまま呼んでいるだけ。

      onAxisMoveSpeed: function(e) {
        if (e.detail.axis[1] == 0) {
          this.speeding = null
        } else if (e.detail.axis[1] > 0) {
          this.speeding = 'down'
        } else if (e.detail.axis[1] < 0) {
          this.speeding = 'up'
        }
      },
      onAxisMoveAngle: function(e) {
        if (e.detail.axis[0] == 0) {
          this.rotating = null
        } else if (e.detail.axis[0] > 0) {
          this.rotating = 'right'
        } else if (e.detail.axis[0] < 0) {
          this.rotating = 'left'
        }
      },

実際のもの

実際にVR上でプレイしたものを録画したやつ。

VRでのスティック操作バージョン（モデル変える前に撮影したやつ） pic.twitter.com/9v34bxapMu
— だら🍔技術系投稿サービスや100の質問メーカー運営中 (@dala00) June 17, 2019

GitHubページで実際に試せる。実機がない人はキーボードのWASDでもOK。

https://dala00.github.io/a-frame-car-sample/

ソースはGitHubにもアップしてある。

dala00/a-frame-car-sample: Car control sample with A-Frame

まとめ

めちゃくちゃ簡単なのでぜひみんなやってみましょう。

次はFirebaseのRealtime Databaseいれてみんなで同時に部屋の中にいる、みたいなの試したい。

A-FrameのSuper HandsでVR空間のオブジェクトを掴んでみる

2019-06-12T22:28:14+09:00

A-Frameという、マークアップとJavaScriptを使ってOculus Quest等のブラウザだけでVRアプリケーションを作ることのできるフレームワークがあります。

サンプルなどを試してみると本当に簡単にVR空間を作ることができて面白いのですが、やはりWebエンジニアとしてはただ物を配置するだけではなく色々とインタラクティブにVR空間で遊べるようにしてみたいと感じます。

とくにOculus Questのようなコントローラは物を掴んだりという操作が非常にすべてが直感的で、VRをはじめてみて一番の衝撃でもありました。なんとかそのあたりを簡単にできるようにしたいと思い調べてみたところ、下記のライブラリが見つかりました。

Super Hands

wmurphyrd/aframe-super-hands-component: 👐All-in-one natural hand controller, pointer, and gaze interaction library for A-Frame

公式のマニュアルでも紹介されており、恐らく簡単にコントローラを使えるようにしてくれているのだと思います。

実際に上記のページのサンプルを試してみました。

こんな感じで手が表示され、青いボックスを掴んだり、両手で掴むと拡大縮小することもできます。GitHubのREADMEを見るとわかりますが、ソースもたったこれだけです。

注意点

多分ですが、ローカルやCodePenなどでもうまく動かなかった気がします。手のモデルを読み込んでいるのでとりあえずサンプルのHTMLをどこかWeb上にアップしてアクセスして試さないとダメっぽいです。

ですのでもしかしたら公式で紹介しているコントローラなどでもうまく手を使ったりすることができるのかもしれません。

ちなみにサーバーアップされているサンプルが下記です。（対応端末でないと手は出てきません）

https://wmurphyrd.github.io/aframe-super-hands-component/examples/physics/

まとめ

とにかくA-Frameでできることのサンプルやプレビュー画像がWeb上に不足しているので、何かしら試したら投稿していってみたいと思います。