背景を変更してシーンを切り替える【これからはじめるReact360】

はじめに

フロントエンドデザイナーのやまかわです。今回はReact360での背景の切り替えの実装についてご紹介します。

以前の記事では環境構築と動画を背景にする方法についてご紹介しました。
おさらいしたい方はこちらの記事をご覧ください。

【これからはじめるReact 360】 まずは環境構築

360度動画を背景にする【これからはじめるReact 360】

画像の用意

今回は画面上にボタンを配置し、そのボタンがクリックされると背景画像が切り替わるという機能の実装をしていきます。

最初に360度画像を2枚用意しました。

こちらの2枚をボタンを押すことで交互に表示を切り替えます。
素材に関しては、前回同様 static_assets ディレクトリに入れておきます。

client.jsの実装

画像の配置が完了したら、最初に表示する360度画像をclient.js内で指定します。

client.js

function init(bundle, parent, options = {}) {
  const r360 = new ReactInstance(bundle, parent, {
    // Add custom options here
    fullScreen: true,
    ...options,
  });

  // Render your app content to the default cylinder surface
  r360.renderToSurface(
    r360.createRoot('bagelee_contents', { /* initial props */ }),
    r360.getDefaultSurface()
  );

  // Load the initial environment
  r360.compositor.setBackground(r360.getAssetURL('scene1.jpg'));
}

window.React360 = {init};

このうちソースの下の方にある、

r360.compositor.setBackground(r360.getAssetURL('scene1.jpg'));

に注目します。
react-360 initした状態ですでにデフォルトの背景画像が指定されていますが、そのソースの部分を用意した画像のパスに変更します。この状態で一度確認をすると画像が切り替わっているのが確認できるかと思います。

index.jsの実装

次にindex.jsに画像を切り替えるためのロジックを記述していきます。

##### index.js

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  VrButton,
  Environment,
  asset,
} from 'react-360';

export default class bagelee_contents extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      scene: 1,
    }
  }
  onClick = () => {
    if (this.state.scene === 1) {
      this.setState({ scene: 2 })
      Environment.setBackgroundImage(asset('scene2.jpg'))
    } else {
      this.setState({ scene: 1 })
      Environment.setBackgroundImage(asset('scene1.jpg'))
    }


  }
  render() {
    return (
      <VrButton style={styles.greetingBox} onClick={this.onClick}>
        <Text style={styles.greeting}>
          Click to change scene!
        </Text>
      </VrButton>
    );
  }
};

いくつか新しいコンポーネントや関数が出てきましたので解説します。

VrButtonコンポーネント

VR空間上にボタンを配置することができるコンポーネントです。使い方は通常のwebのボタンと同じく、onClickイベントに処理を渡すことでイベントを発動することができます。

Environment

背景画像や背景動画の設定や削除を行うためのものです。今回使用したsetBackgroundImage()は背景画像を指定するときに使用する関数です。

assets()

static_assets配下のアセットを参照するときに使用する関数です。よくEnvironmentとセットで使用することが多いです。

処理のながれ

処理の流れについてはまず現在のシーンの情報を判断するためのstateであるsceneを作成し、scene1であることを示す1を格納しておきます。VrButtonのクリック時にそのstateをみて現在のシーンが1なのか2なのかを判断します。

1だったら次のシーンであるシーン2の画像を、2だったらその逆であるシーン1の画像をEnviroment.setBackgroundImage()を使って背景画像の設定をします。

出来上がったものがこちらになります。

まとめ

React360の背景画像を変更する処理の実装についてご紹介しました。
処理を一つ一つ紐解いてみてみると意外にも中身はシンプルな構造になっていることがわかります。
このようにReact360では、WebのReactと同様にstateやpropsを管理しながら複雑なVRサービスを構築していくことができます。UIについても今回はVR空間上に作成をしましたが、VR空間の上に2DのUIを重ねる実装をすることも可能です。
次回はそちらの実装についてご紹介したいと思います。