マガジンのカバー画像

コンピューター

62
本
運営しているクリエイター
siouxcitizen

#ReactThreeFiber

CodePenでesm.sh&CDNでお手軽にReact Three FiberとReact RouterとTailwind CSSを連携させてみるテスト

概要前回からの継続作業です。　目標だったReact Three FiberとReact RouterとTailwind CSSの連携を行いました。　まず最初に前回の作業からReact Three Fiberのバージョンを同じ8.15.12にしたままTailwind CSSを追加した作業をしばらく行い、Tailwind CSSとの連携がうまくいくことを確認後、React Three Fiberのバージョンを8.16.1に上げて作業を行いました。　React Three Fib

siouxcitizen

CodePenでesm.shでお手軽にReact RouterとReact Three Fiberを連携させてみるテスト

前回の作業のReact Routerを使用したコードでは自分の思うようなレイアウトを作成するまでの道のりは遠そうだったので、とりあえずそれは保留にしておき、本来の目標であったReact RouterとReact Three Fiberを連携させてみました。 React RouterとReact Three Fiberを連携させるまでの過程 ■React Three Fiber 8.15.12 & React Router 6.22.3 Test01（失敗） まず最初に

siouxcitizen

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

CodePenでesm.shでお手軽にReact Three Fiberを使用してみるテスト　まとめ 　前に書いたここやここのnoteで試しているReact Three Fiberのコードの実行がしづらくなってきたので、CodePenでできるだけお手軽＆お気軽に同じようなReact Three Fiberのコードを実行できないか実験してみました。　結果としては、想像していたよりも問題なく動いてくれた、です。　これで、お手軽＆お気軽（手抜き？）にReact Three Fi

siouxcitizen

CodePenでesm.shでお手軽にReact Three Fiberを使用してみるテスト４　3Dモデルアニメーション切り替え表示

　前回からのつづきです。　esm.shを使用したCodePenのコードで、React Three Fiberによる3Dモデルアニメーションの切り替え表示を行ってみました。　切り替え用3DモデルアニメーションはglTFファイル形式のものを使用しています。 概要 　前回の、3Dモデルアニメーションを1つだけ再生するコードから、3Dモデルによる複数のアニメーションを切り替えるコードに進化？させてみました。　 　作成したコードのうち、Test01、Test04、Test05、と

siouxcitizen

CodePenでesm.shでお手軽にReact Three Fiberを使用してみるテスト３　3Dモデルアニメーション表示

　前回からのつづきです。　esm.shを使用したCodePenのコードで、React Three Fiberによる3Dモデルアニメーションの表示を行ってみました。　3DモデルアニメーションはglTFファイル形式のものを使用しています。 概要 　コードは全てglTFファイル形式による3Dモデルアニメーションを動かすものですが、Test01からTest03までのコードと、Test04からTest09までのコードでは、アニメーションを再生させるコードの書き方が異なっています。　

siouxcitizen

CodePenでesm.shでお手軽にReact Three Fiberを使用してみるテスト２　3Dモデル表示

　前回からのつづきです。　esm.shを使用したCodePenのコードで、React Three FiberによるglTFファイル形式3Dモデルの表示を行ってみました。 概要 　githack経由でglTFファイル形式3Dモデルを読み込んで3Dモデルを表示させています。　読み込んでいるglTFファイルには .glb と .gltf の2種類の拡張子があります。　また、前回からReact Three Fiberのバージョンを、使用するreact-three/dreiのバージ

siouxcitizen

CodePenでesm.shでお手軽にReact Three Fiberを使用してみるテスト１　基本図形表示

　前回からのつづきです。　esm.shを使用したCodePenのコードで、React Three Fiberによる基本的な3Dオブジェクトを表示してみました。 概要 　最初に、Test01やTest02のコードにて、前回のJavaScriptコードの書き方にHTMLをまぜないようにして、よく見るReact Three Fiberのコードのサンプルに近い見た目になるようにしました（←でないと自分がよくわからなくなってしまうのでｗ）。　それに合わせてCodePenではBabe

siouxcitizen

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

esm.shでお手軽に（手抜きして？）React Three Fiberを使用してみるテスト、をしてみました。 作業用コードfork元　兼　調査対象にさせていただいた３コード 最初はCodePenにあった比較的シンプルなコードと思われる以下の３つのコードからfork（コードのコピペのようなもの）をさせてもらい作業をはじめました。　３つのコードは、importを使用してReact Three Fiberを動かしているコードから選ばせてもらいました。　最終的には、fork元コ

siouxcitizen

CodeSandbox上コードをCodeSandbox形式からDevbox形式にコンバート

■CodeSandbox形式からDevbox形式に変換 久しぶりにCodeSandboxで作業をしようと思ったら、無料で投稿できるCodeSandboxのコード数が20までに制限されるらしく、それを上回る数はDevboxというものに変換しなけば Read Only 状態になってしまうとのことだったので、あわててそのDevbox形式に変換しました。　その記録を残しておきます。　 参考 変換前のCodeSandboxへの投稿コードについてのまとめnoteは以下になります。　De

siouxcitizen

CodeSandboxでReact Three Fiber実験まとめ

React Three Fiberの機能をいろいろ試してみました。 React Three Fiber実験 note リスト React Three Fiberで、BoxやPlane、Sphereといった基本的な3Dオブジェクトの表示、テクスチャー貼り付け、ボタン表示のUI実験を少々等、行っています。 自分で作成したMagicaVoxcelによる3DモデルをglTF形式ファイルに変換して表示しています。 上記「その２」よりひきつづき、色々なglTF形式ファイルによる3

siouxcitizen

CodeSandboxでReact Three Fiber実験その５　glTF 3Dモデルアニメーション切り替え表示

■20240126追記　ここにあるように、投稿したコードのCodeSandbox形式からDevebox形式への変更でコードが正常に表示されなくなる場合があります。　またCodeSandboxの仕様によりDevbox形式コードへの制限時間以上のアクセスがあった場合はアクセスがブロックされるとのことです。 前回のその4のつづきです。　今回はglTF形式のファイルに含まれる、3Dモデルの複数のアニメーションを切り替える処理を実装したコードをCodeSandboxへ投稿してみました

siouxcitizen

CodeSandboxでReact Three Fiber実験その４　glTF 3Dモデルアニメーション表示

■20240126追記　ここにあるように、投稿したコードのCodeSandbox形式からDevebox形式への変更でコードが正常に表示されなくなる場合があります。　またCodeSandboxの仕様によりDevbox形式コードへの制限時間以上のアクセスがあった場合はアクセスがブロックされるとのことです。 前回のその３のつづきです。　今回はglTFファイル形式の3Dモデルアニメーションを表示させる、CodeSandboxに投稿したコードをリストにしてみました。　3Dモデルをアニ

siouxcitizen

CodeSandboxでReact Three Fiber実験その３　glTF 3Dモデル表示

■20240126追記　ここにあるように、投稿したコードのCodeSandbox形式からDevebox形式への変更でコードが正常に表示されなくなる場合があります。　またCodeSandboxの仕様によりDevbox形式コードへの制限時間以上のアクセスがあった場合はアクセスがブロックされるとのことです。 前回のその２のつづきです。　今回は前回glTFファイル形式の3Dモデルを表示できるようになったコードを参考に、いくつかの3Dモデルを表示するテストコードを作成しCodeSan

siouxcitizen

CodeSandboxでReact Three Fiber実験その２　glTF 3Dモデル表示テスト

■20240126追記　ここにあるように、投稿したコードのCodeSandbox形式からDevebox形式への変更でコードが正常に表示されなくなる場合があります。　またCodeSandboxの仕様によりDevbox形式コードへの制限時間以上のアクセスがあった場合はアクセスがブロックされるとのことです。 前回のその１のつづきです。　今回はCodeSandbox上のReact Three Fiberで、glTF形式の3Dモデルを表示してみました。　最終的に使用したライブラリは前

siouxcitizen