CodeSandboxでReact Three Fiber実験まとめ

React Three Fiberの機能をいろいろ試してみました。

React Three Fiber実験 note リスト

React Three Fiberで、BoxやPlane、Sphereといった基本的な3Dオブジェクトの表示、テクスチャー貼り付け、ボタン表示のUI実験を少々等、行っています。

自分で作成したMagicaVoxcelによる3DモデルをglTF形式ファイルに変換して表示しています。

上記「その２」よりひきつづき、色々なglTF形式ファイルによる3Dモデルを表示しています。

glTFファイル形式の3Dモデルのアニメーションを表示しています。　React Three Fiberの機能というよりは、Three.jsの機能をそのまま使用しての表示となっています。

glTFファイル形式の複数3Dモデルアニメーションを含むファイルの読込・表示からの、アニメーションの切り替えを行るようにしたコードです。　その機能を流用して「その４」でThree.jsの機能で表示していたアニメーションを、React Three Fiberのそれで表示させるようにしたコードも置いています。

関連まとめ