2019-08-18に更新

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

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

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

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

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

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

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

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

イベント

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

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

Scene – A-Frame

ツイッターでシェア
みんなに共有、忘れないようにメモ

だら@Crieit開発者

Crieitの開発者です。 Webエンジニアです(在宅)。大体10年ちょい。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel, React, Flutter, Vue.js, Node, RoR 趣味:Elixir, Phoenix, Nuxt, Express, GCP, AWS等色々 PHPフレームワークちいたんの作者

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

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

有料記事を販売できるようになりました!

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

コメント