2019年12月17日

プログラミング

3D空間上に2DのUIを重ねる【これからはじめるReact360】

3D空間上に2DのUIを重ねる【これからはじめるReact360】3D空間上に2DのUIを重ねる【これからはじめるReact360】

目次

  1. はじめに
  2. ネイティブモジュールとは?
  3. 実際に表示してみる
  4. まとめ

はじめに

新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay17です!
昨日はActive Storageを使ってS3にファイルをダイレクトアップロードする方法についての記事でした。

Active Storageを使ってS3にファイルをダイレクトアップロードする

今回はこれからはじめるReact360第5回、3D空間上に2DのUIを重ねる実装についてご紹介いたします。

前回までのこれからはじめるReact360では3D空間上でのレイアウトのご紹介をしてきました。今回は2D空間のレイアウトを3D空間に重ねるための実装についてご紹介します。

具体的には以下のようにUIを画面上に重ねてみます。

master.gif (23.2 MB)

ボタンや説明などを画面の端に常時表示させたい時などに有用です。
2D側のUIを重ねるにはネイティブモジュールを使用します。

ネイティブモジュールとは?

React Nativeを開発している方でしたらネイティブモジュールは馴染みのあるものかもしれません。iOSやAndroidでのOS側のネイティブな機能を使用するために必要になります。React360ではネイティブモジュールを使用することでブラウザの機能を使用することができるようになります。

実際に表示してみる

では実際にネイティブモジュールを追加して、UIを表示する実装をしていきましょう。
実装の流れとしてはネイティブモジュールを使用してブラウザ側のDOM情報を取得します。
取得したDOMにReactDOMを使用してUIをRenderします。そのためRenderしたDOMの中はReact360ではなくWebのReactで記述します。

index.html

まずはindex.htmlに描画するDOMを追加します。どこに書いても大丈夫ですが、React360の描画されるcontainerの下に追加するとわかりやすいと思います。

<div id="overlay"></div>

2D側のコンポーネント作成

次に重ねる2DのUIについても書いておきましょう。通常のReactと同じようにコンポーネントを作成しましょう。
今回はStyle等は割愛します。

import React from "react";

const OverlayScreen = () => (
  <div className="inner">
    <p className="text">ここは2Dレイヤーです</p>
  </div>
);

export default OverlayScreen

これで下準備は完了です。では早速ネイティブモジュールを追加していきます。

ネイティブモジュール

import React from 'react'
import ReactDOM from 'react-dom'
import Overlay from './Overlay'
import { Module } from 'react-360-web'

const renderOverlay = dom => {
  const elm = document.getElementById('overlay');
  ReactDOM.render( <Overlay />, elm )
}

export default class SetOverlay extends Module {

  constructor(ctx) {
    super('SetOverlay');
    renderOverlay('top');
    this._ctx = ctx;
  }

}

流れとしては#overlayのあるDOMにReactDOMを
Renderする関数をネイティブモジュール内で呼び出して使用します。
ネイティブモジュール内はブラウザの機能が使用できるので、documentやwindowなどが使用可能です。

client.js

先ほど書いたネイティブモジュールをclient.jsで呼び出して、使用します。
ReactInstanceを定義する際にネイティブモジュールを追加する文を追加します。

const r360 = new ReactInstance(bundle, parent, {
  fullScreen: true,
  nativeModules: [
    ctx => new SetOverlay(ctx),
  ],
  ...options,
});

まとめ

今回はReact360で360度画面上に2DのUIを表示する実装についてご紹介しました。
画面上に2DUIを重ねることでReact360の実装の幅が広がります。一度試してみるといいかもしれません。

0

0

AUTHOR

yamakawa

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

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

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

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

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

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

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

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

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

sasakki デザイナー

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

しまだ

しまだ デザイナー

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

Miu マーケター

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

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

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

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

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

Sayaka Osanai デザイナー

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

はらた

はらた エンジニア

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

うえまつゆい エンジニア

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

kobori

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

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

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP