Reactをはじめましょう
はい、おはようございます。Reactを完全に理解してしまい新たなるステージへ旅立ちつつある僕です(超絶イキリ)。そうしたわけで本日はReact VRもといReact 360でVR的サムシングを作っていこうと思います。まあ、Reactを完全理解してしまった僕ならほんの5秒もたたないうちに攻略できると思います(超絶イキリ 2回目)。
React 360 やりましょう
ということで、VTuberになるぞーとか言って何にもしていない休眠企画の景気づけに、React 360というVR的エクスペリエンスを提供できるツールを触ってみようと思ったのでした。
実際にこのツール使うとこんな感じのパノラマがつくれるそうです。
導入は以下の通り。
# インストール 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