2019年10月9日

プログラミング

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

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

目次

  1. はじめに
  2. 画像の用意
  3. client.jsの実装
  4. index.jsの実装
  5. まとめ

はじめに

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

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

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

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

画像の用意

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

最初に360度画像を2枚用意しました。
scene1.jpg (437.6 kB)
scene2.jpg (864.9 kB)

こちらの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()を使って背景画像の設定をします。

出来上がったものがこちらになります。
bagelee_contents.gif (6.1 MB)

まとめ

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

0

0

AUTHOR

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

eishisでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

CONTACT PAGE TOP