Edited at

React VRのサンプルを動かしてみる

More than 1 year has passed since last update.

React VRが今週リリースされたので試してみました。VR初心者です。


環境要件


  • Node.jsのv6以上

  • yarnまたはnpmのv3以上

  • (ちなみにPCのchrome57.0.2987.133 で動作確認しています)


手順

React VRのREADME通りにやっていきます。


1. お手軽に試すためにまずはCLIをインストールします。

$ npm install -g react-vr-cli

または
$ yarn global add react-vr-cli


2. CLIを使ってプロジェクトの雛形を作ります。

$ react-vr init PROJECT_NAME

PROJECT_NAME には任意の名前を入れます。ドキュメントには書かれていませんがハイフンは使えませんでした。特にこだわりがなければ英数字だけにした方が無難だと思います。

また、(カレントパス上の)既存のディレクトリ名も指定できません。


3. 作られたプロジェクトのディレクトリに移動して起動します。

雛形が作られ、Hello World的なものも作られているのでそのまま動かしてみます。

$ cd PROJECT_NAME

$ npm start
または
$ yarn start


4. ブラウザで http://localhost:8081/vr/ を開きます。

もしくはターミナルで $ npm run open を実行してもOKです。初回はビルドが走るため、表示されるまで時間がかかります。ターミナルで以下のように完了表示になるまで待ちましょう。

Bundling `xxx/vr/client.js`

Transforming modules 100.0% (103/103), done.


5. 以下のビューが表示されたら成功です。

PCブラウザで見ている場合は、ピンチイン/アウトやドラッグで視点を変えられます。

image


その他のサンプル

ここまではREADMEのままやってきましたが、React VRのレポジトリには他にもサンプルがあるので、これらも動かしてみます。


手順


1. React VRのレポジトリをgit cloneするなりしてローカルに持ってきます。


2. react-vr/Examplesディレクトリを新たに作ったプロジェクトディレクトリにコピーします。


3. あとはブラウザからディレクトリ構造に合わせて http://localhost:8081/Examples/Controller/vr/ のようにアクセスすればOKです。

たまにビルドエラーになりましたが、一度止めてnpm startで再実行すれば正常にビルドできました。


画像で雰囲気だけ


Controller

image

残念ながらPCのChromeでは「No controllers」となってしまいました。

ソースコードを見ると、

React NativeのAPIを使用して、NativeModules.ControllerInfo.getControllers() と取得していました。

Oculus Riftなどのデバイスなら何か取得できるのかもしれません。


CylindricalPanel

image

CylindricalPanelコンポーネントを使っています。

下側のReactアイコンはボタンになっていて、クリックするとボタンが大きくなったり戻ったりトグルします。


ModelSample

image

Modelコンポーネントを使っています。

Adobe Photoshop等で作るマテリアルファイルというもの必要なようです。このサンプルではModelSample/static_assets/creature.mtlcreature.objがあります。


VideoSample

image

image

Videoコンポーネントを使っています。HTMLのvideoタグと同じ感じでmp4とwebmファイルを用意しておいてデバイスの対応フォーマットに応じて選択しているようです。


VideoSample360

image

VideoPanoコンポーネントを使っています。

元のmp4ファイルはパノラマ動画になっていて、QuickTime Playerで再生すると↓のような感じです。

image


その他のコンポーネント

公式ドキュメントにはもう少しコンポーネントやAPIが載っているので試してみます。が、長くなったのでとりあえずここまで。