React VRの空間内部を移動してみました

• 

  React VRとはFacebookが開発している、JavaScriptでVRを開発できるフレームワークです。 ReactVRの空間内を移動するボタンを作ってみたので、その内容を共有します。

  動作環境

  下記の環境で動作させました。

  名前	バージョン
  Ubuntu	17.10
  Node.js	9.1.0
  React VR	2.0.0
  Chromium	62.0.3202.75

  プログラムの説明

  index.vr.jsを変更し、static_assetsにhalake_logo.pngというファイル名でHaLakeのロゴを置きました。 index.vr.jsの変更内容を説明します。

  視点の設定

  <Scene style={{
    transform: [
      {translate:
       [this.state.translateX, this.state.translateY, this.state.translateZ]}
    ]
  }} />

  Scene の操作で視点の位置を変更できるため、this.stateの値に応じて座標を変更できるようにしました。

  ボタンの設置

  <View style={{
    transform: [
      {translate: [this.state.translateX, this.state.translateY + 2, this.state.translateZ - 6]}
    ]
  }}>
    <VrButton onClick={()=>{ this.setState({translateX: this.state.translateX - 1}) }}>
      <Text style={styles.button}>
        Left
      </Text>
    </VrButton>
    ..
    ..
  </View>

  視点と一緒に操作ボタンも移動してほしいので、ボタンを囲むviewの座標をstateで設定しています。 ボタンがクリックされたら、setStateで座標位置を更新しています。

  画像の設置

  <Image
    style={{
      width: 1,
      height: 1,
      transform: [
        {translate: [-0.5, 0, -4]}
      ]
    }}
    source={asset('halake_logo.png')} />

  移動したことが分かるように、移動しない画像を設置しました。

  画像データは static_assets に置いています。

  デモ

  動作させた様子です。

  

  プログラムは下記のリポジトリで管理しています。

  asukiaaa/reat-vr-practice

  分かったこと

  Panoで設定した画像は、視点を動かしても変化しない

  視点移動で画像がズームされたりするのかと思っていましたが、違いました。 背景は無限遠に配置されるようです。

  視点と一緒に移動する物体が、視点移動時にカクつく

  物体の移動と視点の移動のタイミングが異なるからか、カクカクします。 他の方が作っている視点移動のデモでは、視点ではなく物体の座標を移動させていて、その例ならスムーズに動いているように見えました。 カクつきなく動かすには、視点を移動させずに周りに配置した物体を移動させるのが良さそうです。

  参考

  • Move Camera
  • React VRで太陽系を創ろう、3次元モデリングとアニメーションの基礎(前編)【がっつりReact!シリーズ 第2回】