React Three Fiberで作る3Dインターネットくす玉

「Kyoto.なんか #7」に参加してきた。

Kyoto.なんか #7 - connpass

そこで id:nagayama さんがReact Three Fiberの話をしていて、Reactの宣言的な書き方でThree.jsの3Dシーンを描画できるの良いなと思った。

r3f.docs.pmnd.rs

以前にThree.jsを使ってみたときにちょっと書いたけどなかなか書き方難しいな、と感じていたのだった…。

memo.sugyan.com

そして会の終了後に id:Windymelt さんがインターネットくす玉をReact Three Fiberで作ろうとしていたのが面白そうだった (懇親会中には完成しなかった)。

blog.3qe.us

ので、自分でも書いて練習しようと思って作ってみた。 Vibe Codingでは手直しが多くなりそうだったので主にCopilotと相談しながら自分の手で。しかしやっぱり型エラーの解消が難しかったな…。

玉をクリックすると割れます。もう1回割りたかったらリロード。 紙吹雪の量とか動きとかは調整してみたかったけど 一旦ここまで。

github.com