コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

その日思い出したんだ。僕がVTuberに憧れていたということを……

Reactをはじめましょう

はい、おはようございます。Reactを完全に理解してしまい新たなるステージへ旅立ちつつある僕です(超絶イキリ)。そうしたわけで本日はReact VRもといReact 360でVR的サムシングを作っていこうと思います。まあ、Reactを完全理解してしまった僕ならほんの5秒もたたないうちに攻略できると思います(超絶イキリ 2回目)。



React 360 やりましょう

ということで、VTuberになるぞーとか言って何にもしていない休眠企画の景気づけに、React 360というVR的エクスペリエンスを提供できるツールを触ってみようと思ったのでした。

f:id:andron:20190209073031g:plain
実際にこのツール使うとこんな感じのパノラマがつくれるそうです。


導入は以下の通り。

# インストール
npm install -g react-360-cli

# 【プロジェクト名】の作成
react-360 init 【プロジェクト名】

# サーバ起動
# デフォルトでは「http://localhost:8081/index.html」
cd 【プロジェクト名】
npm start

フォルダ構成は大雑把に以下の通り。

構成 説明
index.js アプリケーションのメイン部分
client.js ランタイム接続部分
index.html 表示用のWebページ
static_assets アセットフォルダ

パパっと動くゴミつくる程度だったら index.jsコンポーネント追加するだけでわりとできそう。まあ、ちょっと使ってみての感想なんです。だけどもちょっと深いことやろうとすると現状ドキュメントだけみてるだけじゃうまいことできる手段なさそう。きつい。そして、コードを読み解いてもパノラマビューくらいしか使い道が思い当たらない。どうしたもんかねぇ。ブログとかのサムネには向いているのかもしれない……?

とりあえずReact系いじりでの今後の課題は演出面だなってことに気づかせてもらったので今回はこれで良しとしてみる。


公式
React 360 · Create amazing 360 experiences

GitHub
GitHub - facebook/react-360: Create amazing 360 and VR content using React