コンピューター

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

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（失敗）まず最初に

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

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

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

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

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

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

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のバージ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Babylon.js v6.3.1 Practiceめも②　MagicaVoxel作成3DモデルをglTF形式で表示

前回からのつづきです。　今回はBabylon.jsにて、自分でMagicaVoxelで作成してglTFファイルに変換した3Dモデルを表示しています。　途中からBase64によるglTFファイル読込・表示なども行っています。　コーディングは前回までのBabylon.jsコーディングと同じようにHTML、CSS、JavaScriptで行っています（Typescript使っていません）。　目次の各項目では、コードのタイトル文字列をクリックするとコードとその実行結果が見れるCod

#WebGL

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

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

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

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

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

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

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

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

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

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

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

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

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

Babylon.js v6.3.1 Practiceめも② MagicaVoxel作成3DモデルをglTF形式で表示