ReactThreeFiberは最高に美しく面白い

この記事は100％の愛と情熱で出来ています。

突然ですが、R3Fを知っていますか・・？

え、知らないんですか？
しかしあなたは幸運です。今、この素晴らしいライブラリの存在を知ることができたからです。
え？そもそもR3Fはなんだって？
これは、three.jsのReact版であるReactThreeFiberの略称で、Reactで簡潔に3Dシーンを構築できるライブラリです。
R3Fとはどんなものか、以前くわしく書いた記事があるのでご参照ください。
https://zenn.dev/solb/articles/d25e664154cc0c

このライブラリの最高に推したいポイントは、

最小の美しいコードで、最高の美しいWeb3Dが実現できる

ということです。
R3Fの公式サンプルを見てください。
https://docs.pmnd.rs/react-three-fiber/getting-started/examples

本当にWebですか？と思うようなクオリティです。
製作者のPaulさんとコミュニティの方々が天才的なのもそうですが、Three.jsで扱うパラメータをReactThreeFiberでは、いい感じに初期値を入れてくれているので、最小のコードで最大の美しさを得られます。
言うなれば、生まれながらにして圧倒的なかわいさをもつWeb界の橋本環奈といっても差し支えないでしょう。

まだ、Web制作を2Dでやってるんですか・・？

え、もしかして、まだWeb制作を2Dでやっているんですか？
今イケてるWeb制作やピックアップされてるWebサイトはほぼWebGLです。（※9割9分の偏見が入っています）
例えばあなたがAppleの社員だとしましょう。新製品のApplePodsをよりたくさん売るために、以下のようなプロモーションサイトを制作することができます。

デモサイト

この圧倒的美しさとリッチ表現、言葉は不要でしょう。
これは6~8時間程度で制作しましたが、たった1日でこのクオリティ、R3Fはレベチで簡単に作れます。美しく時短で最高のものが作れてしまう、さしずめWeb界のバルミューダといっても差し支えないでしょう。
え、ちょっとなにいってるかわからない？

これをみたエンドユーザーはより具体的に使用感がわかり、カラーリングはどれにしようかなど、所有した時の具体的なイメージが膨らみ、
貴社の製品の売り上げは5000兆になること間違いないでしょう。
補足：※10割の誇張が入っているので、売り上げにならなくても訴えないでください。

まさかWebサービスも2Dの範囲で考えてるんですか・・？

例えばあなたがメーカーで勤務していて管理部門にいるとしましょう。
新しい設備導入で、工場の生産性がどれくらいかかるかシミュレーションしたい、そんなケースもあると思います。そんなときにR3Fのリソースである物理エンジンを使って簡単に作れます。
さくっと簡単に実装してみました。

デモサイト

この圧倒的な汎用性、どうでしょう？
この記事を読んでいる賢いあなたはもう気づいているはずです。

＿人人人人人人人人人人人人＿
＞ R3Fはすべてを解決する！！ ＜
￣Y^Y^Y^Y^Y^Y^Y^Y￣

ということに。
まさにどんなプロダクトにも、とりあえずR3Fを入れとけばLP制作もシミュレーションもなんとかなる、言うなればWeb界の大谷翔平だといっても差し支えないでしょう。

え、まだゲームをUnityで作ってるんですか・・？

大正解。ゲームは普通にゲームエンジン使ったほうが絶対に楽ですよ

R3Fでもゲームは作れます。
しかもブラウザさえあればどんな端末でもアクセスできるので、マルチプラットフォームを考える必要も、謎にお金払ってAppleStoreにアップロードする必要もありません。

もうAppleやGoogleに涙を流しながら割合利益を奪われる心配は無くなります。
簡単にですが、さくっとThirdPersonゲームを作ってみました。

デモサイト

どうですか？
このパフォーマンスで、この美しさで、UnityやUnrealEngineで同じものができますか？？
まぁ普通にできるかもしれないです

R3FではXRなどの対応されており、これでゲームを作るメリットはありすぎるほどありますし、
Three.jsでもBVHなど、効率的に衝突判定して物理演算をするための方法などは出ています。
おいApple、いい加減iPhoneをWebXRに対応しろください。

汎用ゲームエンジンを使うよりもThree.jsマスターになれば、Webゲームにおいては遥かにパフォーマンスやWebインタラクティブなゲームを作ることができるでしょう。多分。

ここまでの性能と革新性は、言うなれば、常に革新的なエンターテインメントを提供するWeb界の喜劇王チャップリンといっても差し支えないかと思います。

最後に

ここまで飽きずに読んできてくれた、あなたの気持ちはわかります。
もうR3Fを使いたくて使いたくて震えている頃でしょう。
言うなれば、R3FはWeb界の西野カナといっても差し支えないかもしれません。

ぜひR3Fの使ってその面白さを実感してほしいです。
よくR3Fを学ぶ前にThree.jsを学ぶ必要があるかという話をされますが、
個人的な意見としては、気にせずにR3F触ってていいと思います。
R3Fの勉強を進めていけば結局Three.jsを逆引きで勉強していくことになるので、とりあえず楽しく続けていくためにもR3Fでいいのではないかと思っています。
R3Fを作成したPmndrsコミュニティのコンポネント作りはとても素晴らしく、
誰でも簡潔に美しく使えるように、コンポネントの初期パラメータがデフォルトでいい感じに設計されているなと感じています。

まずはサンプルを触りながら楽しさを実感してもらい、
必要に応じてThree.jsドキュメントやShader言語に足を踏み入れればいいと思っています。
今回Shaderには触れませんでしたが、私も今勉強中の分野で、より表現の幅やパフォーマンスを求めていくとShaderの分野に足を入れていくことになりますが、それはR3Fの楽しさに触れて作りたいものが既存リソースじゃ作れないときに触ってみてからでいいと思っています。
どんどん手を動かして一人でも多くの人がR3Fの楽しさに触れてくれると嬉しいなと思います。

最後に、定期的にR3Fの勉強会などをやっていますので、もし興味がある方はぜひDiscordなどでご参加いただけると嬉しいです。
https://discord.gg/CdjXp66MHP

また、ことあるごとにR3F愛を伝える記事を書いていく予定ですので、
また見てくださるとうれしいです。

R3FとWebGLの今後の輝かしい未来に、乾杯。