全方向から単語を浴びれるWordCascadeVRを作った

WordCascadeVRの遊び方から簡単な仕組みまで書きたいと思います。

対応機器

スマホ、PC、Oculus、Viveに対応してるはずです。(Oculus Go非対応)
OculusQuestのみで動作確認しています。

操作方法

スマホ：ダブルタップで文字化け。
PC：スペースで時間停止。エンターキーで文字化け。WASDキーが使えます。
Oculus,Vive：右トリガーで時間停止。左トリガーで文字化け

自動で横に回転する機能が嫌な場合、一度VRボタン押すと回転しなくなります。

開発についてあれこれ

javascriptで動いてます。Vue.jsとA-Frameを使いました。

Vue.jsはjavascriptのフレームワークで、普通のWordCascadeで使っていたのでそのまま流用しました。

A-FrameはVR用のグラフィック関連のフレームワークです。(内部でthree.js使ってるらしいです。) DOMから立体にできます。

躓いたところ

Vue.js → DOM → A-Frame という形で、DOM経由でA-Frameに渡してましたが、常にオブジェクトが動き続けるのにいちいちDOMで値を渡ししているのが腑に落ちません。これがボトルネック処理速度が重くなっている気がします。

Canvasの描画完了で発火されるrequestAnimationFrame()関数はVRモードでは発火されません。(Canvasじゃないからか..)代わりの関数というのも探せなかったので仕方なくsetTimeout関数を使ってアニメーションさせました。

単語じゃなくて土台とカメラが上昇してます。

VRだと退屈になると思ってインタラクションを付加しようと頑張りましたが文字化け機能しかつけられませんでした。

A-Frameの日本語文字表示は標準では対応してません。この記事,この作者様に非常に助けられました。

おわり