CodePenでesm.shでお手軽にReact Three Fiberを使用してみるテスト　まとめ

CodePenでesm.shでお手軽にReact Three Fiberを使用してみるテスト　まとめ

　前に書いたここやここのnoteで試しているReact Three Fiberのコードの実行がしづらくなってきたので、CodePenでできるだけお手軽＆お気軽に同じようなReact Three Fiberのコードを実行できないか実験してみました。　結果としては、想像していたよりも問題なく動いてくれた、です。　これで、お手軽＆お気軽（手抜き？）にReact Three Fiberのコードを実行できそうです。　CodePenでコード実行する際に利用させていただいたgithack.comやesm.shのサービスが続くこと前提ではありますが。　CodePenでいろいろライトに試して、最終的にはViteなんかでビルドするみたいなことできたらいいな～、とも考えています。

最初のCodePenでの作業をまとめたnoteです。　ほぼ全てCodePenでのReact Three Fiber利用のための準備です。　

次にまとめたnoteです。　最初に少しコードの表示を整えてから、CodePenでReact Three Fiberをライトに使えそうな目処がたったので、BoxやPlane、Sphereといった基本的な図形の表示からははじめ、テスクチャを貼り付けてみたBoxやPlane、Sphereといったものの表示までを行っています。

こちらのnoteではglTFファイル形式の3Dモデルを読み込んで表示するコードをまとめてみました。

glTFファイル形式の3Dモデルのアニメーションを表示するコードのまとめです。　前半と後半で使用しているコードの系統が違います。

最後に複数の3Dモデルアニメーションの切り替えを行うコードをまとめています。

いや～、CodePenでの作業前に想像していたよりもReact Three Fiberのコードがサクッと動いてくれてありがたかったです。　せっかくなのでこの後はReact RouterやTailwind CSSとの連携なんかもできないか試してみる予定です。

継続作業