React VR触ってみた


なんかきてた。

![スクリーンショット 2017-03-15 20.39.05.png](https://qiita-image-store.s3.amazonaws.com/0/23936/2b31ce66-0091-7700-9ee5-ed7e70283980.png "スクリーンショット 2017-03-15 20.39.05.png")
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/ からサンプルコンテンツが閲覧できます。
![スクリーンショット 2017-03-15 20.45.20.png](https://qiita-image-store.s3.amazonaws.com/0/23936/aa90473b-7fd6-3106-31c5-4ac95732fa85.png "スクリーンショット 2017-03-15 20.45.20.png")

## [おまけ]ファイル構成

```
$ 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

```