目次
目次を開く
はじめに
(2024/12/12追記)Labsに名称変更しました💦
よく見るイケイケなポートフォリオサイトの Works ページに憧れがあり、自身のサイトを作る際には絶対に作りたいと思っていました。制作途中で放置しているようなヘボヘボ Works しかアップしていませんが、これからどんどん増やしていけたらいいなぁと思っています。
一応覚えているうちに各サイトの説明などを残しておきます。
works（作成日降順）
jikka-2022-1
created_at:2022/1
実家にある神殿を作成しました。後継者問題で悩んでいる宗教 2 世の方って多いと思うんですが、誰も継がなくていい教会があればいいなと思い、作成しました。めちゃくちゃ制作途中で放置していたのですが、せっかくここまで作っていたので Web 上にアップしてみました。
現時点では r3f を使用して組んでいます。ページ遷移を追加する場合も見込んで、組み直すときに Next.js にしようと思っています。
3D モデルは実家の写真に思い出補正をかけて Blender で作成しました。現在の実家の神殿は新しくなってしまい風情がなくなっていたので、リフォーム前の姿を思い出しながら絵作りに取り組みました。
orange
created_at:2021/12
React-three-fiber（r3f）がどうやらすごいらしいとのことを Twitter で見かけたので、入門して作ってみたやつです。
こちらのチュートリアルで入門しました。glft を React のコンポーネントに変換するパッケージを使ったりとテクニック満載のチュートリアルです。
lowpoly-room
created_at:2021/11
当時流行っていたThree.js Journeyを完走した記念に作ったやつです。Three.js Journey ではたくさんの知識を学びました。
3D モデルはbilibili の Blender 入門動画で作ったものです。動画を通して作成した 3D モデルを Web 上にアップしても良いか、動画の作者である羊羊羊的教室さんに確認をとった上でアップしています。最近更新が止まっていて残念ですが、当時この動画で Blender を学べて本当に良かったです（約 7 時間半の超大作入門動画です 😇）。ありがとうございました 🙇🏻♂️
この時期に TypeScript の学習も始めたので、最初は Vanilla で作成していたのですが、のちに TypeScript で置き換えました。また、スライダーで部屋の明るさの変化を表現している部分は、Three.js Journey の作者であるBruno Simon 氏の Twitch 配信を参考に Blender を用いて Bake 画像を作成して表現しました。水面と焚き火の炎は Blender で作成したものを Three.js で使えなかったので、Three.js で一から構築しています。
solarSystem
created_at:2021/6
WebGL スクールを受講した際の課題で作成したものです。課題のお題は「地球」だったような気がします。地球や他の惑星の大きさと距離を調べたり、NASA の画像を使用したりして実装した記憶があります。適度にリアルを追求することの大切さを学びました。
Fan
created_ad:2021/6
WebGL スクールの「扇風機」という課題で作成したものです。ただ扇風機を作るだけだと面白くないと思い、変わったものを作ってしまいました。悪い癖ですね(´・ω・｀)
webglschool2021_three001
created_at:2021/5
WebGL スクールの「Box」という課題で作成したものです。謎に結構気に入っています。タップと画面の描画が妙にしっくりリンクしていることにより、謎の一体感が生まれて気持ちいいです。
終わりに
振り返ってみると、個人で制作しているものは全て 3D 関連なんですね。どんだけ好っきやねんって感じです。今後は、このブログのようなアプリケーションも作っていきたいですし、3D 関連の制作途中であげているものもちゃんと作り直したいです。
また works に上げれるような作品ができたら、この記事をアップデートするかもしれないですし、新しく記事にして紹介するかもしれません。works の更新頻度を上げれるように個人開発を頑張っていきたいです(๑•̀o•́๑)۶