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ブラウザで見ている場合は、ピンチイン/アウトやドラッグで視点を変えられます。
その他のサンプル
ここまではREADMEのままやってきましたが、React VRのレポジトリには他にもサンプルがあるので、これらも動かしてみます。
手順
1. React VRのレポジトリをgit cloneするなりしてローカルに持ってきます。
2. react-vr/Examplesディレクトリを新たに作ったプロジェクトディレクトリにコピーします。
3. あとはブラウザからディレクトリ構造に合わせて http://localhost:8081/Examples/Controller/vr/
のようにアクセスすればOKです。
たまにビルドエラーになりましたが、一度止めてnpm start
で再実行すれば正常にビルドできました。
画像で雰囲気だけ
Controller
残念ながらPCのChromeでは「No controllers」となってしまいました。
ソースコードを見ると、
React NativeのAPIを使用して、NativeModules.ControllerInfo.getControllers()
と取得していました。
Oculus Riftなどのデバイスなら何か取得できるのかもしれません。
CylindricalPanel
CylindricalPanelコンポーネントを使っています。
下側のReactアイコンはボタンになっていて、クリックするとボタンが大きくなったり戻ったりトグルします。
ModelSample
Modelコンポーネントを使っています。
Adobe Photoshop等で作るマテリアルファイルというもの必要なようです。このサンプルではModelSample/static_assets/
にcreature.mtl
と creature.obj
があります。
VideoSample
Videoコンポーネントを使っています。HTMLのvideoタグと同じ感じでmp4とwebmファイルを用意しておいてデバイスの対応フォーマットに応じて選択しているようです。
VideoSample360
VideoPanoコンポーネントを使っています。
元のmp4ファイルはパノラマ動画になっていて、QuickTime Playerで再生すると↓のような感じです。
その他のコンポーネント
公式ドキュメントにはもう少しコンポーネントやAPIが載っているので試してみます。が、長くなったのでとりあえずここまで。