コンピューター

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

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

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

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

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

コード共有サイト CodePen で2013年に人気だった投稿ベスト100

100位～91位The most hearted Pens of 2013 100位～91位より 100位 Twitter Post Fetcher - compiled 99位 Menu toggle button 98位 CSS3 Card Deck Drop Down 97位 Some buttons... 96位 CSS3 pricing table 95位 Demo Flexbox 1 94位 Tunnel vision 3D CSS

コード共有サイト CodePen で2014年に人気だった投稿ベスト100

100位～91位The most hearted Pens of 2014 100位～91位より 100位 Forms-Floated Labels 99位 Navigation Bar by Jan Kaděra 98位 Simple Audio Visualisation 97位 Kinda Realistic Text 96位 Pure CSS Loaders kit 95位 CSS Mars Landing 94位 Add a littl

コード共有サイト CodePen で2016年に人気だった投稿ベスト100

100位～91位The most hearted Pens of 2016 100位～91位より 100位 SVG Page Hopper 99位 Mobile navigation animation 98位 [WIP] Landing Animation for BBAE 97位 Material Compact Login Animation 96位 Touch device jelly menu concept 95位 Css3 Transf

コード共有サイト CodePen で2017年に人気だった投稿ベスト100

100位～91位The most hearted Pens of 2017 100位～91位より 100位 Emoji Train 🚂 🚃 🚃 🚃 🚃 99位 Pure CSS Connect 4 98位 CSS Camera 97位 WebGL Fluid Simulation 96位 Menu "Hamburger" Icon Animations 95位 Pool Ripple 94位 News Cards - CSS only 93位

プログラム投稿サイトメモ

CodePen CodePen https://codepen.io/ 参考 The Most Hearted of 2021 2021年にCodepenで話題！コピペ可なHTMLスニペットベスト100発表 The most hearted Pens of 2021 100位～91位 The most hearted Pens of 2021 90位～81位 The most hearted Pens of 2021 80位～71位 The most hearted

#codePen