前提としてHtml,css,jsはProgateなどで大体知ってますが、web開発の経験はほぼ0の初心者です。
普段はblenderで遊んでいます
なんと半日足らずで上記のようなものができました！
CGをぐりぐり動かせます
イエス！

01.VS Codeをインストール

エディターです
以下のリンクからインストール

プラグインでLive Viewerなど

02.homebrewのインストール

後述するチュートリアルを始めてみたら、npm installというのをしており知らない！となり調べたり人に聞いてみるとhomebrewなどが必要だよとのこと
なんじゃそれ！

ということで以下を参考にしました

PATHを通すという行為がつまづきかけましたが、ゴリ押しでなんだかんだできました

03.nodebrewのインストール

homebrewをインストールした後nodebrew等をしなければいけないらしいとのこと
なんだこれ。。。

いろいろ調べて以下記事を参考にしました
バージョンは記載の通りに行ったらエラーが出たため最新のにしてみました
nodebrew install v18.17.0
nodebrew use v18.17.0

04.Three.jsチュートリアルの開始

このチュートリアルを参考にさせていただきました。
Three.jsかReact-three-fiberか迷ったけどReactの方がちょっと簡単そう！ということで後者を選びました。

https://www.youtube.com/watch?v=UVZ0UkdKgmY

チュートリアルはわかりやすいですが、たまに文字間違えたりするので注意が必要です
同じ風にやって自分のもエラーになった場合は少し進めてみると良いと思います！

code . が使えない場合
https://qiita.com/kkwk/items/90daefecd1ee5baad5f0

05.blenderファイルのインストール

blenderからgltfファイルとしてエクスポート
拡張子はglbではなくgltfなので注意してください。

実験してみましたが、テクスチャしか書き出されずシェーダーが書き出せないようです。
色々調べてみたい。。。

05.完成！

なんとか完成というかチュートリアル完了に漕ぎ着けました！
所要時間は3~4時間程度です。

CGのwebサイトっぽい体裁に
※フォントのインストールもチュートリアルにあります

やったー！！
次はディストーションとか色んなエフェクト、シェーダー周りに手を出していきたいと思います。

※次PCでやろうとしたときにlocalhostが開かないときはターミナルでファイルに移動してnpm run devで再度始めます

cd(移動) /Users/ユーザー名/Documents/ファイル/作ったjsonがあるファイル/
npm run dev

以下のようにでたら完了

こういうの教えてもらえないので挫けやすい。。。