2019-06-14に更新

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

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を見るとわかりますが、ソースもたったこれだけです。

  <a-scene>
    <a-assets></a-assets>
    <a-entity>
      <a-camera></a-camera>
      <a-entity sphere-collider="objects: a-box" super-hands hand-controls="left"></a-entity>
      <a-entity sphere-collider="objects: a-box" super-hands hand-controls="right"></a-entity>
    </a-entity>
    <a-box hoverable grabbable stretchable draggable dropppable color="blue" position="0 0 -1"></a-box>
  </a-scene>

注意点

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

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

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

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

まとめ

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


だら@Crieit開発者

Crieitの開発者です。 主にLAMPで開発しているWebエンジニアです(在宅)。大体10年程。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel5, CakePHP3, JavaScript, RoR 趣味:Elixir, Phoenix, Node, Nuxt, Express, Vue等色々

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

コメント