blender使いがReact-Three-fiberでWebサイトに3Dを入れてみた
前提として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
以下のようにでたら完了
こういうの教えてもらえないので挫けやすい。。。
この記事が気に入ったらサポートをしてみませんか？