React VRを試す

React VRはFacebook社が開発したVRコンテンツ用ライブラリです。

ブラウザがあればだれでも簡単に試すことができるので、今回はReact VRの試し方をご紹介します。

前提

React VRはNode.js製のツールです。今回はインストールを省略します。

• node.js　v6.10.3

手順

npmコマンドでreact-vr-cliをインストールします。

$ npm install -g react-vr-cli

確認のため、react-vrコマンドを実行してみます。

$ react-vr
React VR Command Line Interface
Version 0.3.5

Usage:
  react-vr init [project name]  Create a new React VR application with the specified name

バージョンとUsageが表示されました。

次にreact-vr init <プロジェクト名>でプロジェクトを作成します。
今回は「HelloReactVr」という名前にしました。

$ react-vr init HelloReactVr

さっそく実行しましょう！

$ cd HelloReactVr
$ npm start

Macなどのローカル環境であれば、http://localhost:8081/vr/index.html にアクセスすることで表示されます。

誰でも見られるようにしたVRサイトを https://www.kichij.org/vr/index.html に用意しました。

実際に使用している画像は下記になります。ReactVRが処理して360度画像として処理しているため湾曲している画像に包まれているようにブラウザで表示されるのです。

かんたんに編集してみる

パノラマ画像を準備する。

iphoneのパノラマモードで撮影した画像でもよいです。また、360度表示用の画像はFlickr VRなどでも入手可能です。