ちら帳

喉元を過ぎると熱さを忘れる自分の為の、ちら裏メモ帳ブログです。

React VR : 仮想キーボードを使った入力

React VRで仮想キーボードを扱えるパッケージを見つけたので、使ってみました。

www.npmjs.com

外観はこんな感じになります。キー入力はカーソルを合わせてクリックする方式です。

f:id:chira_pym:20170621205247p:plain

使い方

インストー

React VRのプロジェクト下に移動して仮想キーボードのパッケージをインストールします。

npm install react-vr-textinput

react-vr-textinput/static_assets 内にあるup.pngとdown.pngをプロジェクト内のstatic_assetsにコピーしておきます。

カーソルの設定

キーボードを使うにはカーソルが必要になります。 注視カーソルで入力するのはつらいので、コントローラーかマウスを使うことにします。

コントローラー

コントローラーは公式のサンプルにあるThreeDOFRayCasterを利用すると簡単に実装できます。

github.com

コントローラーの表示はこんな感じになります。

f:id:chira_pym:20170701191344p:plain

マウス

マウス用のraycasterはもともと用意されているものを拡張したクラスを用意します。

import {
    MouseRayCaster
} from 'ovrui';

export default class MyMouseRayCaster extends MouseRayCaster {

    drawsCursor() {
        return true;
    }
}
client.js

raycastersオプションに各raycasterを指定します。加えてコントローラーの描画にsceneの指定も必要になります。

// Auto-generated content.
// This file contains the boilerplate to set up your React app.
// If you want to modify your application, start in "index.vr.js"

// Auto-generated content.
import {VRInstance} from 'react-vr-web';
import ThreeDOFRayCaster from '../src/ThreeDOFRayCaster';
import MyMouseRayCcaster from '../src/myMouseRayCaster';
import * as THREE from 'three'

function init(bundle, parent, options) {
  const scene = new THREE.Scene();
  const vr = new VRInstance(bundle, 'TestInput', parent, {
    // Add custom options here
    raycasters: [
        new ThreeDOFRayCaster(scene),
        new MyMouseRayCcaster()
     ],
     scene: scene,
     cursorVisibility: 'auto',
    ...options,
  });
  vr.render = function() {
    // Any custom behavior you want to perform on each frame goes here
  };
  // Begin the animation loop
  vr.start();
  return vr;
}

window.ReactVR = {init};

入力フィールドの表示

サンプルコードをもとに仮想キーボードの入力フィールドを表示します。 Submitを押すとフィールドの隣に入力した文字列が表示されるようになっています。

import React from 'react';
import {
  AppRegistry,
  asset,
  Pano,
  Text,
  View
} from 'react-vr';
import TextInput from 'react-vr-textinput'

export default class TestInput extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      text : ''
    };

    this.submitHandler = this.submitHandler.bind(this);
  }  
  
  submitHandler(string) {
    this.setState({text : string});
    console.log('the text received by the submitHandler is ' + string);
  }
   
  render() {
    return (
      <View>
        <Pano source={asset('chess-world.jpg')}/>
        <TextInput onClick={this.clicked} onSubmit={this.submitHandler} rows={1} 
        cols={20} x={-1} y={0.2} z={-1.5} rotateY={null} rotateX={null} textColor={'black'} backgroundColor={'pink'} keyboardColor={null} keyboardOnHover={null}/>
        <Text style={{transform: [{ translate: [0.2, 0.63 , -1.5]}]}}>{this.state.text}</Text>
      </View>

    );
  }
}

AppRegistry.registerComponent('TestInput', () => TestInput);

動作確認

コントローラー

f:id:chira_pym:20170701223222g:plain

マウス

2回目の入力でテキストの位置がおかしくなっていますが、マウス入力だからというわけではなく、 コントローラーで入力しても同じことが起きます。

f:id:chira_pym:20170701223048g:plain

遭遇した不具合

  • 入力フィールドが表示されず、TextInputがないとエラーが出た
      node_modules/react-vr-textinput/index.jsの内容に不備がありました。
//module.exports = require('./src/TextInput'); 
module.exports = require('./src/textInput');

追記:Issueを書いたら迅速に直してもらえました。ありがたや。

  • VRモードにすると入力フィールドが上の方に表示される
      HMDを被った瞬間、上の方に行ってしまうのはなぜなのでしょう。

  • VRモードにするとキーボードにカーソルが合わなくなる
      コントローラーから注視カーソルに変えたら直ったので、コントローラー側の実装とかみ合っていなかったようです。

  • VRモードでカーソルの動きにhoverのアニメーションがついてこれていない
      しばらく待っていると、あとからカーソルを合わせた順にキーが点滅していくので、表示の処理が追いついていないっぽいです。

  • VRモードでたまに入力内容がフィールドに反映されない
      おかしいなと思ってHMDを外して画面を見てみると、ちゃんと入力されているので、表示が間に合っていないようです。

GitHubの方に今後は処理速度の向上を目指していくみたいな記述があったので、アップデートに期待ですね。

This module is fully functional. Our next goal is to refactor for speed and also further enhance customizability through providing users even more props. We are also working on adding auto-complete support for faster typing. This will be an optional component that users can select to enable with their text input box and virtual keyboard. Please feel free to ask for additional functionality and we will try to add features as soon as possible.

今日のひとこと

ZenFone ARが発売されたせいか、最近 DayDreamやTangoについてのツイートを見かける機会が多くなりました。

楽しそうでうらやましいです。