マガジンのカバー画像

コンピューター

60
本
運営しているクリエイター
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

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

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

siouxcitizen

フルスタックフレームワーク？のNext.js、Remix、Astro、Hono（HonoX）検索用メモ

Webのフロントエンド開発のフルスタックフレームワークと言われているものについて調べてみました。　Next.js、Remix、Astro、Hono（HonoX）といったものが該当するように自分には見受けられたので調べてみましたが、調べれば調べるほどわけが分からなくなってきてしまったのでｗ、あきらめて、せめてそのときに使った検索メモ（Googleによる検索のリンク）などを残しておこうかと記録しておきます。　Next.js13の記事を読んでいる間に、Next.jsさん（とその他の

siouxcitizen

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

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

siouxcitizen

noteとAdobe Expressの連携機能で画像生成AIによる見出し画像を作成してみるテスト

いくつのかnoteで使用していた見出し画像が消えてしまっていたので、タイトルにあるようにnoteとAdobe Expressの連携機能で画像生成して見出し画像にしてみました 画像生成はnoteの見出し画像を取り込むボタンクリックから、「Adobe Expressで画像をつくる」を選択、Adobeの無料会員登録後（自分はGoogleのIDと連携しました）、Adobe Express機能から、メディア→テキストから画像生成→コンテンツタイプを選択→スタイルオプションを選択→生成

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