見出し画像

react-three-fiber の ecosystem を使って Box をたくさん散布した

(出典元:株式会社blue TechBlog

これどうやってるのっていう3Dになっているサイトってありますよね?
弊社では、3Dでリッチなサイトの対応も可能です。

ただ、今回の技術記事は、やってみた系、どちらかといえばエンジニア向けです。 弊社の技術ブログは、技術検証の一環でもありますので、こういったものもありますね。
その一回目!

技術的な話になりますが、JavaScriptで3D表現を行うなら、いろいろな表現が手軽に実現できるThree.jsというライブラリが有名です。
ただし、昨今良く利用されるWEBフレームワークのReactとかと一緒に扱うのは少し難儀なんです。 そんなことを解決してくれる、ライブラリ「react-three-fiber」を使ってみたというのが今回の話。

また、検証してみて気づいたこともあります。
「Reactのようにhtmlコーディングするような感覚で3Dを構築できそうですよ!!」 ←これはエンジニア向けに一言。

フロントエンドの方とサイトを作ると、Next,Vue,最近ではAstroなど耳にすると思いますが、 フレームワークに追加してこういった技術もあるの参考にしていただけると嬉しいです。

・Zenn記事:堀
・noteコメント:高嶋
・この記事の著作権は株式会社blueに帰属します
 出典元Zenn記事はこちら