2019-07-28に投稿

aframe-super-keyboardをVR内で動作させる

A-FrameのVR内で文字を入力させたいと思い探してみるとaframe-super-keyboardというものが見つかった。しかし試してみるとどうもVR内ではうまく動かない。よく見るとデモもブラウザ上でしか動いていない。

一応なんとか動かせたのでそのメモ。

handを指定する

super-keyboardコンポーネントの属性にhandというプロパティがある。これはデフォルトでは

[cursor], [vive-controls], [tracked-controls], [oculus-touch-controls], [windows-motion-controls], [hand-controls], [daydream-controls] [cursor] > [raycaster]

となっている。

ということでもしかしたらデモも動く場合があるのかもしれない。ただ、コントローラのraycasterの階層の仕様が違ったり自分でraycasterを作っている場合は動かないので、ここを指定してあげる必要がある。

僕の場合もraycasterを自分で定義していたのでその要素を指定した。

handに指定したものが複数あるとおかしくなる

super-keyboardの動作仕様として、キーボード画像のhoverしたところの位置を判定して色替えを行っている。それをそのままキーボードの入力としているため、複数の要素でhoverできたりするとどうもおかしくなるっぽい。というか、検索した最初の要素でしか動かないっぽいので、右手では動かないけど実は左手では動く、みたいなパターンもあるっぽい。

うまく動かない場合は一度handの指定では一つの要素だけ存在するようにして試すとうまくいく可能性がある。

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

だら@Crieit開発者

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

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

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

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

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

コメント