コンピューター

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めも　まとめ

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

Three.js r149 で Buffer Geometry つかってみるテストその４

その３からのつづきです。　ひきつづきBuffer Geometryと物理演算の連携を保ちつつ、Buffer Geometryでどこまでできるかを実験しています。その３からさらにいろいろ試した結果、Buffer Geometryへのテクスチャの貼り付け方を少し制御できるようになってきたので、初期ファミコンRPGのドット絵風のテクスチャをその３のときよりサイズを大きめに貼り付けてみました。　自分としてはローポリRPGの地表的なイメージで作成してみました。　最後は操作Box

Three.js r149 で Buffer Geometry つかってみるテストその３

その２からのつづきです。　ひきつづきBuffer Geometryと物理演算の連携を保ちつつ、Buffer Geometryでどこまでできるかを実験しています。　最初のはほうはテクスチャ画像をうまく配置して、一枚絵の大きなテクスチャにできないか実験していますが、最終的にはあきらめています。　Buffer Geometryで作る面の数が増えると貼り付けるテクスチャの方向を制御できなくなってしまいました。その後はBuffer Geometryで作成する面の数を増やしてなめ

Three.js r149 で Buffer Geometry つかってみるテストその２

その１からのつづきです。　その１の最後で使い始めたBuffer Geometryと物理演算の連携を保ちつつ、Buffer Geometryでどこまでできるかを実験しています。　実験で、自分がわかりやすい・認識しやすい基準でテクスチャを表示させているので、扉絵のように風変わりなテクスチャが多いかもですｗ。 Three.js r149 Buffer Geometry Test11 Textured Heightfield Test01 Three.js r149 Buffer

Three.js r149 で Buffer Geometry つかってみるテストその１

このあたりのつづきでThree.js r149でBuffer Geometryを試してみたときの記録です。　少し時間が経ってしまってCodePenでまた自分のコードが埋もれそうになってきたのでコードの在り処を忘れないための自分用の参照リストでもあります。　ちなみに、なぜBuffer Geometryに手を出しはじめたのかは自分でもよく記憶していませんｗ。　なんでだったかな～？？？ CodePen Home Three.js r149 Buffer Geometry Te

Three.js r146 と cannon-es v0.20.0 で物理エンジンとカメラ回転のテスト

前回のnoteで、できそうにないな～、と書いていたモンハンライクなカメラの機能ができたので記録として関連コードとメモを貼り付けておきます。　モンハンカメラといっても、カメラリセット時にカメラが操作対象3Dオブジェクトの背後（真後ろ）にまわるだけのものですが、自分は長い間ウンウンどうやったらできるんや～、と悩んでいたのでなかなかの達成感ありです。そんな自己満足気味なnoteエントリですｗ。成果物概要で、その最終成果物は以下になります。　モンハンカメラのために実装

#threejs