React VR触ってみた

なんかきてた。

https://facebookincubator.github.io/react-vr/index.html

セットアップ

事前準備

とりあえずディレクトリ作ります。

$ mkdir react-vr-example
$ cd react-vr-example

React VR CLIのインストール

以下のようなpackage.json作ります。

package.json

{
  "name": "react-vr-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "react-vr-cli": "^0.1.5"
  }
}

npm installでインストールしましょう。

サンプルプロジェクトの作成

node_modules/react-vr-cli/index.js initでプロジェクトを作成できます。

$ node node_modules/react-vr-cli/index.js init sample
$ cd sample

CLIから作成したプロジェクトは以下のようになっています。

sample/package.json

{
  "name": "sample",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node -e \"console.log('open browser at http:/localhost:8081/vr/\\n\\n');\" && node node_modules/react-native/local-cli/cli.js start",
    "bundle": "node node_modules/react-vr/scripts/bundle.js",
    "open": "node -e \"require('xopen')('http://localhost:8081/vr/')\""
  },
  "dependencies": {
    "ovrui": "~0.1.0",
    "ovr-audio": "~0.1.0",
    "ovr-video": "~0.1.0",
    "react": "15.4.1",
    "react-native": "0.42.0",
    "three": "^0.80.1",
    "react-vr": "~0.1.0",
    "react-vr-web": "~0.1.0",
    "xopen": "1.0.0"
  }
}

React VRの起動

npm startで起動できます。

$ npm start

> sample@0.0.1 start /Users/dc_hideokamoto/develop/reacts/react-vr-example/sample
> node -e "console.log('open browser at http:/localhost:8081/vr/\n\n');" && node node_modules/react-native/local-cli/cli.js start

open browser at http:/localhost:8081/vr/


 ┌────────────────────────────────────────────────────────────────────────────┐ 
 │  Running packager on port 8081.                                            │ 
 │                                                                            │ 
 │  Keep this packager running while developing on any JS projects. Feel      │ 
 │  free to close this tab and run your own packager instance if you          │ 
 │  prefer.                                                                   │ 
 │                                                                            │ 
 │  https://github.com/facebook/react-native                                  │ 
 │                                                                            │ 
 └────────────────────────────────────────────────────────────────────────────┘ 
Looking for JS files in
   /Users/YOUR_USER_NAME/develop/reacts/react-vr-example/sample 

Loading dependency graph...
React packager ready.

起動に成功すると、http:/localhost:8081/vr/ からサンプルコンテンツが閲覧できます。

[おまけ]ファイル構成

$ tree -I node_modules 
.
├── index.vr.js
├── package.json
├── rn-cli.config.js
├── static_assets
│   └── chess-world.jpg
├── vr
│   ├── client.js
│   └── index.html
└── yarn.lock