ReactVRで簡単にVRツアーを作るならLiveTourLabを使おう

ReactVR

ReactVRはReact.jsのようにコンポーネントを組み合わせて作れるVRコンテンツが作れるフレームワークです。
WebVRとReactNativeを使っていて、Webの基本技術を使いながらVRコンテンツを簡単に作成できます。

しんどい

ReactVRでは <Text /> や<VRButton />といったVR用コンポーネントが予め容易されていますが、標準のものは簡素なものでスタイルはCSSで当てて作っていきます。

これがかなりしんどくて、Unityでは3D空間があってそこにオブジェクトをグラフィカルに置けますがスタイルもなくただのオブジェクトを雰囲気で置いていくしかないため本格的なコンテンツを作るときは難しいです。

LiveTourLab

その問題点を解決するのが、LiveTourLabです。
これは部屋の紹介などのツアー型のVRコンテンツが簡単に作れるライブラリで、Reactコンポーネントとして提供されています。

import React from 'react';
import { LiveTour } from 'live-tour-lab';

export default class sample extends React.Component {
  render() {
    return (
      <LiveTour tourURI='sample.json' />
    );
  }
};

ReactVRのindex.vr.js内でLiveTourコンポーネントを呼び出してあげて後述する書式のjsonをpropsとして入れるだけでVRコンテンツが表示されます。

jsonでコンテンツを記述する

{
    "name":"sample",
    "defaults":{
    "infos":{
        "icon":"icon.png"
        }
    },
    "firstSceneId":"room1",
    "scenes":[
        {
        "id":"Room1",
            "photopanos":[
            {"src":"room.jpg","rotateY": 75}
        ],
        "navs":[
            {"to":"Television","txt":"Move", "rotateY": 75}
        ],
        "preloads":[
            {"src":"room2.jpg"},
            {"src":"room3.jpg"}
        ]
    }
    ]
}

このようにjsonを記述してコンテンツを配置します。
photopanosにはThetaなどの360度カメラで撮影した画像を指定するとVR空間へ360度表示されます。
navsはボタンになっていて、次のシーンへのリンクになっています。
見つめることでクリックできるのが特徴です。
preloadsで次のシーンに使う画像を予めロードしておけるので、シーンが移動したときにロードで止まって没入感が損なわれることを防げます。

その他にも色々なオブジェクトが用意されているので詳しくは
LiveTourLabのドキュメントを確認してみてください