Google VR Viewに情報ウィンドウをOverlayで表示してみました


VR Viewに情報表示用の窓を付けてみました。

ぐるぐる動かしている時に状況に応じて固定位置に”なんか”表示します。

 

PCとスマホ・タブレットではDOM要素を使います。

カードボードではDOM要素が見えないので、Overlayを使います。

HotspotをクリックしてSceneを切り替えることでツアーのような効果を得られます。


このOverlayがうまく機能しない場合は、別のOverlayを使うやり方でやってみてください。


サンプル

PC

左上に見えているのはマウスムーブした時の情報

スマホ・タブレット

左上に見えているのはデバイスモーションの情報

カードボード(Cardboard)

右下に見えているのはデバイスモーションの情報ですが、Cardboard装着時には視界の中央で表示されます。

ヘッドアップディスプレイの文字表示みたいで、ちょっとカッコイイと勝手に思ってます(^^)。

 


コード

対象はembed.js

デバッグモード時に表示されるStatsを参考にしてみました。


Cardboard対応

ちょっとイレギュラーですが…..。

VR Viewでカードボード対応にする場合、

このアイコンをタップします。

タップする際は、スマホは横向きにしておいた方がいいみたいです。

デフォルトの場合、こういう注意書きが3秒ほど表示されるようになっています。

これはembed.jsの中では「RotateInstructions」という機能が担っています。

RotateInstructionsはoverlayを用いる恰好のサンプルです。

これを利用してみます。

コードを改変して、出しっぱなしにして、ここに文字を表示します。

改変部分

RotateInstructions()という関数を書き換えます。

前のaddInfoElementとIDがかぶらないようにします。

textは中央に表示すると二重に見えてしまうので、左右どちらかに偏らせて表示します。

 

 

出しっぱなしにする場合

タイマーを使っているのを出しっぱなしにします。

this.rotateInstructions_.showTemporarily(3000, this.layer_.source.parentElement);

 

 

this.rotateInstructions_.showPermanent(this.layer_.source.parentElement);

 

関数追加

 

RotateInstructions.prototype.showPermanent = function(parent) { this.show(parent);

};

 

 

文字を表記する場合

CardboardのDOM要素は後で追加されるようになっているので、起動時には存在しません。

try・・・catchで逃げておきます。

try{ document.getElementById(“YYYYY”).innerHTML = “????”; }catch(e){}

 


RotateInstructions()の完全書き換え以外のサンプル

 


テスト版 (機能実装としてはこちらが正です)

ホットスポットにフォーカスが当たると少し拡大されますが、その際、説明分を表示します。フォーカスが解除されると消えます。

PC版のマウスオーバーでTOAST表示しているもののCardboard版です。

HotspotをクリックするとSceneの移動や動画の再生、静止画の表示、サウンド再生などを行います。

 


CardboardでのHotSpotクリック

初期型では側面のマグネットスイッチで行っていました。

マグネットスイッチはうまく機能しない場合もあるようです。

最近のCardboard(V2)は物理的にタッチディスプレイを押すタイプになっているもよう。スイッチもコツみたいなもんがあって、クリックする感覚で押せばいいです、しっかり押すと反応しない場合がありますね。

レンズもなにやら大きくなっている気がする。

2018/01/30現在、Amazonでは799円です。


その他のOverlay

embed.jsではRotateInstructions以外に、ViewerSelectorやLoadingIndicatorでもOverlayが使われています。

ViewerSelectorはDialogを表示するサンプルになります。

次回はこれのご紹介をしてみます。


 

 

 

 

 

 

 

Be the first to comment

Leave a Reply

Your email address will not be published.


*