Help us understand the problem. What is going on with this article?

React VRを試す

More than 3 years have passed since last update.

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などでも入手可能です。

fk_2000
最近の関心事:YouTube、aws、IoT、マイコンボード エンジニア採用、IT導入担当、ブログメディア編集長( https://avatarworld.info/ )、 ↓こちらのYouTubeチャンネルで動画をアップしています。 https://www.youtube.com/channel/UCFM7KsJZC8uGJ1BRMT-4dFg
https://twitter.com/fk_2000
orylab
オリィ研究所は距離や身体的問題を克服し、あいたい人に会え、行きたいところに行ける未来を実現します。
http://orylab.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away