React VRを試す

  • 3
    いいね
  • 0
    コメント

React-VR-1.png

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 に用意しました。

20170713_vr_hello.png

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

chess-world.jpg

かんたんに編集してみる

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

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