Original

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で設定した画像は、視点を動かしても変化しない

視点移動で画像がズームされたりするのかと思っていましたが、違いました。

背景は無限遠に配置されるようです。

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

物体の移動と視点の移動のタイミングが異なるからか、カクカクします。

他の方が作っている視点移動のデモでは、視点ではなく物体の座標を移動させていて、その例ならスムーズに動いているように見えました。

カクつきなく動かすには、視点を移動させずに周りに配置した物体を移動させるのが良さそうです。

参考

HaLakeイベント情報

上記のバナーをクリックいただくと、HaLakeで行われる、勉強会、ワークショップ、もくもく会などのイベント情報をご覧いただけます。

お問い合わせ

コワーキングスペースの利用や、プログラミング教室に関して、お問い合わせください。
また、セミナー、ワークショップ、イベント等の開催についてもお気軽にどうぞ。

HaLakeとは、埼玉県越谷市レイクタウン駅から南に徒歩数十秒のビルの4Fにある、コワーキングスペースです。

この内容で送信します。よろしいですか?