マガジンのカバー画像

コンピューター

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

#JavaScript

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 Routerを使用してみるテスト

ここからの作業のつづきです。　引き続き esm.sh による CodePen のコードで、今回は React Router を使用できるか試してみました。 fork元コードｘ３ 以下の skypack により React Router の機能を使用している３つのコードをforkして参考にさせていただき、skypack 部分を esm.sh に置き換えていきながら React Router の動く CodePen コードを作成していきました。 １．hello-react-

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

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

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

siouxcitizen

Babylon.js v6.3.1 Practiceめも⑦　（失敗）HeightMapと物理演算

前回からのつづきです。　Babylon.jsのHeightMapと物理演算との連携を試してみました。　結果、失敗です。。。　いつかまた再トライするときのための記録として、その過程とともに残しておきます。。。　コードは、最終的には想定どおりに動かず失敗だった＆かなり長くなってきたので、（失敗ですが）最終成果物のPractice#62のコードだけを載せています。 　HeightMapと物理演算の連携は、HeightMapによる地形に物理演算が反映されたり、されなかったりして、コ

siouxcitizen

Babylon.js v6.3.1 Practiceめも　まとめ

CodePenに投稿したBabylon.js v6.3.1による3Dプログラムを、まとまりのある単位ごとにnoteにリストしていたものをさらにリスト化しましたｗ。　まとめのまとめですｗ。 関連まとめ

siouxcitizen

Babylon.js v6.3.1 Practiceめも⑥　物理演算（Havok Physics）とカメラ操作

前回からのつづきです。　Babylon.jsの機能でボタンを表示して、タイトルにもある物理演算やカメラ操作を行うコードを作成しました。　物理演算ではBabylon.js v6で使えるようになった物理エンジンのHavok Physicsを使用してみました。 　ちなみにこのnote、あとで自分でも参照できるようにとアレもコレもと書きすぎてしまったせいか、細かすぎ、長すぎになった気配ありですｗ、閲覧注意ですｗ。 　コーディングは前回までのBabylon.jsコーディングと同じよ

siouxcitizen

Babylon.js v6.3.1 Practiceめも④　glTF形式3Dモデルアニメーションいろいろ表示

前回からのつづきです。　今回はglTFファイル形式の3Dモデルアニメーションを表示するプログラムをリストしてみました。　こちらも前回と同じく、読込・表示に時間がかかるものがいくつかあります。 　コーディングは前回までのBabylon.jsコーディングと同じようにHTML、CSS、JavaScriptで行っています（Typescript使っていません）。　目次の各項目では、コードのタイトル文字列をクリックするとコードとその実行結果が見れるCodePenのページを開き、サムネイ

siouxcitizen

Babylon.js v6.3.1 Practiceめも③　glTF形式3Dモデルいろいろ表示

前回からのつづきです。　glTF形式の3Dモデルをいろいろ表示しています。　モデルによっては読込・表示までに時間のかかるものも。 　コーディングは前回までのBabylon.jsコーディングと同じようにHTML、CSS、JavaScriptで行っています（Typescript使っていません）。　目次の各項目では、コードのタイトル文字列をクリックするとコードとその実行結果が見れるCodePenのページを開き、サムネイル画像をクリックすると実行結果をフルスクリーンで表示するCod

siouxcitizen