背景
2023年はReact、Three.js、Blenderを中心に触れることが多かったです。
Qiita記事を見ているとポートフォリオを作成したという記事をいくつか拝見しました。
私もポートフォリオサイトを作ってみたいと思い、1か月ほど前から空き時間を活用してポートフォリオサイトを作ってみました！
本記事はその振り返りとなります。
作ったもの
以下のWebサイトを作成しました。
スクロールしてみたくなるサイトがコンセプトです。
スクロールするたびにアニメーションにより3Dモデルが動くのが特徴です。
サイト内で使用している3Dモデルについて
Blenderを使用し3Dモデルは自作しました。
Blenderとは？
3DCGを作成できるオープンソースなソフトです。
3DモデリングやアニメーションからVFXまで作成できます。
- blender：https://www.blender.org/
作成した3Dモデルは大きく次の4点です。
- 地球（blender側で回転するアニメーション付き）
- 月
- 紙飛行機
- 部屋
月と紙飛行機は比較的に楽に作成できましたが、
地球と部屋の作成には時間がかかりました。
・地球の3Dモデルの作成について
地球のモデルは、家、木、紙飛行機、雲、ビル・・等が含まれています。
それぞれをオブジェクトを作成し、gltf形式でエクスポートしたものを
まとめてインポートし地球のモデルを作成しています。
海をもう少し凝ったデザインに改良してみたいです。
・部屋の3Dモデルの作成について
作成の流れは地球の3Dモデルと同じ流れです。
ただ部屋の3Dモデルは、机、椅子、ライト、コップ、キーボードなどなど小物が多く
モデルの作成には一番時間がかかりました。
本来はモニターの3Dモデルに動画に動画を割り当て再生したかったのですが、
Blender側からエクスポートしたファイルをthree側で読み込み動画を再生するやり方がわからず、
画像に置き換えました。
デザインについて
簡単にではありますが、いったんFigmaでどういう見た目にするかをモックアップ的なものを作成しました。
Figmaは無料で使い始めれたので便利でした。
構成
フロントからホスティングまでの環境は以下の通りです。
◆フロント
プロジェクトの作成はViteでReact+TypeScriptの環境を選択しました。
ライブラリ、フレームワークの用途はそれぞれ次の通りです。
- Three：
canvas要素にBlenderで作成した3Dモデル（gltf形式）を表示しています。 - Tailwind CSS、Material UI：Raectで構成している要素のスタイリングやローディングUIの作成に使用。
- Prettier：コードの整形
- ESLint：構文解析
◆GitHub Action
リモートブランチにプッシュした際にVitestで作成したテストコードが実行されるよう、
ymlファイルを作成しています。
ホスティングするサービスについて
今回はポートフォリオサイトの作成ですので、
ホスティングにはお金をかけたくないです。
よってNetlify、Vercel、GitHub Pages、Cloudflare Pagesの4つのサービスを候補として挙げました。
商用利用するわけでもないので正直どれでもよかったですが、
4つの中でこれまで使った事がないCloudflare Pagesを今回使ってみました。
調べる過程で分かったのですがVercelとNetlify、GitHub Pagesには帯域幅が100GB/月の制限があります。
よかった事
◆Blenderの勉強になった点
自分で作りたいものを決めて一旦手を動かして作ってみる⇒詰まったら調べる感じで作っていきました。
以前よりもモデリング力が少々上がった気がします！
◆TypeScriptについて
TypeScriptにあまり慣れていなかったので、
一度JavaScriptで同様のものを作ってからTypeScirptで書き直してます（どちらもViteでプロジェクトは作成）。
関数の引数が間違っている部分があり本来であれば修正すべきだったのですが、
何故か動いていたので気づかずにそのままにしていました。
TypeScript環境にしてからはその点を型エラーで表示してくれたので、
よく言われていると思いますが、TypsScriptのほうが保守性が高いなーと感じました。
◆UIの作成について
UIライブラリやフレームワークを使用すると、1からUIを作成する必要がなく実装が楽でした。
また、人によると思いますが流体UIやマウスストーカーの作成、スクロールバーデザイン変更などちょっぴりおしゃれだなーと思える点の実装は勉強になりました。
◆気になっていた技術に触れることができた点
Pritter、ESLint、の名前は聞いたことがあったので、
Youtubeで関連の動画をちょろっと見たことはあったのですが、
使った事はなかったです。
今回使用してみて良さを実感する事があったのでその点は良かったです。
課題
◆Blender側とThreeで表示した3Dモデルの見た目が異なる点
Blender側とThreeでは3Dモデルの見え方（Bloomの発光感）に少々違いがみられました。
◆初回ロードが遅い点
おそらく重い3Dモデルのファイルを複数使用しているので、
初回の描画が遅くなっていると思われます。
何もしないとUIの表示がラグいので、
レンダリング時にローディング画面が数秒表示される仕様にしました。
dracoという3Dモデルを圧縮するライブラリがあります。
これを使ったら3Dモデルが軽くなるのかなーぐらいしか私も分かってないです。
もう少し調べてみて、導入を検討しても良いかなと考えています。
終わりに
自分で作りたいものを決めて実際に作ってみるのは、
モチベーションも高く維持しながら開発に取り組めるので私にあっていると感じました。
詰まるところもいくつかありましたが、やっていてストレスにまで感じることはなかったです。
2024年の目標としてフロントからバックエンド、インフラまで自分で構築しながら何かしらサービスを作ってみる事を目標としています。
今回はバックエンドの処理でAPIをたたくという事は行っていませんが、
そういったバックエンド、AWS等のインフラについても今年は
勉強していきたいです。