HaLake Magazine

コワーキングスペースHaLakeからの技術情報発信サイトです!IoTからマインクラフトを使ったプログラミング教室、ARやVRなど最新技術情報をお届け!

ニャンパスが運営するコワーキングスペースHaLakeから技術情報発信マガジン@越谷レイクタウン

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

f:id:asukiaaa:20180614125145p:plain

React VRとはFacebookが開発している、JavaScriptVRを開発できるフレームワークです。 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 に置いています。

デモ

動作させた様子です。

f:id:asukiaaa:20180614130755g:plain

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

asukiaaa/reat-vr-practice

分かったこと

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

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

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

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

参考