マガジンのカバー画像

コンピューター

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

2024年4月の記事一覧

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を使用してみるテスト4 3Dモデルアニメーション切り替え表示

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

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

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

CodePenでesm.shでお手軽にReact Three Fiberを使用してみるテスト2 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を使用してみるテスト1 基本図形表示

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

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

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