2019年12月10日

プログラミング

React360でのレイアウトについて【これからはじめるReact360】

React360でのレイアウトについてReact360でのレイアウトについて

目次

  1. はじめに
  2. SurfaceとLocationについて
  3. Locationを使ってみる
  4. まとめ

はじめに

フロントエンドデザイナーのやまかわたかしです。
新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay10です!

前回は平成.rb#10 @株式会社ドリコムのイベントレポートについての記事でした。

今回はReact360でのレイアウト方法についてご紹介したいと思います。
以前のこれからはじめるReact360では背景の切替実装についてご紹介していました。

もう一度ご覧になりたい方は下記のリンクよりお願いします。

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

SurfaceとLocationについて

はじめにReact360でUIを表示する際に考えなければいけないこととしてSurfaceLocation の2つについての違いを理解する必要があります。それぞれについてどのような特性があるか見てみましょう。

Surface

React360の最もベーシックな設定でreact-360 initをしたらこの状態になっています。
自分を中心に大きな円柱を設定し、その内側にDOMを表示します。

デフォルトだとスクショの黒いエリア内にオブジェクトが配置できます。(width 1000px, height 600px)

screencapture-localhost-8081-index-html-2019-12-04-17_04_44.png (1.7 MB)

Surfaceの中でのレイアウトはReact Nativeのflexboxを使うことでレイアウトをすることが可能です。bageleeではReact Nativeのレイアウトについても記事を書いておりますので、こちらも合わせて読んでみると、より理解が深まるかもしれません。

レイアウトを整える【これからはじめるReact Native】

Location

それよりも柔軟なレイアウトをすることができるのがこのLocationです。Locationを使うと、個々のオブジェクトを3D座標軸上に配置することができます。今回はこちらLocationを使ったレイアウトについて詳しくご紹介していきます。

Locationを使ってみる

Locationを使用するための設定

Locationを使用するためにはclient.jsの内容を変更していきます。client.js内をみてみると以下の文が書いてあるところがあるかと思います。

  r360.renderToSurface(
    r360.createRoot('プロジェクト名', { /* initial props */ }),
    r360.getDefaultSurface()
  );

こちらのrenderToSurface getDefaultSurfacerenderToLocation getDefaultLocation にそれぞれ変更します。

  r360.renderToLocation(
    r360.createRoot('プロジェクト名', { /* initial props */ }),
    r360.getDefaultLocation()
  );

これでLocationを使用する準備は完了です。

Locationのレイアウト

Locationは3D空間になるので、従来通りUIコンポーネントを書いただけでは表示することはできません。追加でtransformの設定をする必要があります。transformにはrotateとtranslateの2つがあります。それぞれみていきましょう。

rotate

rotateはその名の通り回転です。rotateの中にもrotateX rotateY rotateZの軸が存在します。
それぞれrotateXが縦軸の回転、rotateYが横軸の回転、rotateZがオブジェクト自体の回転になります。

rotateXを20度回転させた場合

rotateYを20度回転させた場合

rotateZを20度回転させた場合

translate

translateはオブジェクトの位置を変更します。translateにはX軸、Y軸、Z軸があり、それぞれ左右、上下、奥行きに対応しています。

translateの基準になるポイントはオブジェクトの左上の角から計算されます。つまり、中心に表示させたい時はX軸とY軸をオブジェクトの半分だけ-にすることで中央表示が可能です。(CSSのpositionに似ていますね)

Z軸は奥行きですが、0は中心、つまり自分がいる場所に相当しますのでZ軸を0にしたら表示できませんので、正か負かどちらか必ず入力することになります。

中央からX軸を-200pxした場合

中央からY軸を200pxした場合

Z軸を-900px(それまでは-500px)した場合

まとめ

今回はReact360でのレイアウトについてご紹介しました。どこかCSSのpositionレイアウトに似ている気がするので、感覚をつかめばそこまで難しいものではないかなと思います。今回は2Dのオブジェクトでレイアウトをしましたが、今回のレイアウトは3Dのオブジェクトをレイアウトする時にも可能です。

次回は3D空間とは別に2DのUIを表示する(画面右側に表示されている表示方向のUIの様な)方法についてご紹介したいと思います。

0

0

AUTHOR

yamakawa

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

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

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

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

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