React Three Fiber に入門中
Three.js を React の世界で宣言的に扱えるようにする React Three Fiber に入門している。
習作として箱庭を作っている。本当はもっと良い感じのものが作りたかったが、少しずつレベルアップしていきたい
「Three.js を React の世界で宣言的に扱える」などと言っているのは、React Three Fiber は renderer だからだ。その仕様上、ただのカスタムフックやコンポーネントとは一線を画しているように思えた。
React-three-fiber is a React renderer for three.js.
表面を軽くさらっただけだが、renderer.ts などで React Reconciler の文字列を見かけたし、そういえば「React Three Fiber」という名前や <mesh /> などの独自のタグからも、React のレンダーライフサイクルに作用しているのは間違いなさそうだ
Three.js 自体は以前から触っており、その際に素の React で実装していたが、React Three Fiber を使うと色々苦労して実装してしまったものが「いい感じ」になっており (例えばオブジェクトの dispose など)、その宣言的な書き味もあってとても体験が良かった。
開発環境や本番でも状態変化における多重読み込みなども、(限度はあるかもしれないが) 制御してくれているようで、ここら辺もありがたいなあ
さすがにリロードせずに何度もホットリロードしていると、ブラウザメモリがクラッシュしたり、そもそもホットリロードに時間がかかる (というより変更によるビルドかな) という点はあるが、現状目を潰れるレベルだ
なんか物理演算が面白そうなので、Claude 3 にエンジンやライブラリの歴史を聞いた上で rapier に触って見ようかと思った。
ただ水の物理演算には対応していない？のか、やりたいことがやれるのかは不明。まずはやってみようと思う
この記事が気に入ったらサポートをしてみませんか？