KaitoTakase
【制作物共有】3D Banana & Apple
見出し画像

【制作物共有】3D Banana & Apple

KaitoTakase

制作日

2021年11月11日


使用しているプラグインなど

・webpack
・Typescript
・gsap
・three.js
・GLTFLoader


制作について

今回の制作の目的は「Texture Paintを練習してよりリアルな3Dモデルを作成すること」です。

今回は正方形から作っていきます。

スクリーンショット 2021-11-10 18.51.08


まずは大まかな形を作成

スクリーンショット 2021-11-10 18.54.48


サブディビジョンサーフェスで表面を滑らかに

スクリーンショット 2021-11-10 19.00.31


Texture Paintでリアルなバナナの色をつけていきます。

スクリーンショット 2021-11-10 19.03.19


全体を黄色で塗ったらダーティ頂点カラーを使用します。

スクリーンショット 2021-11-10 19.03.26


そこへ緑色の部分を追加していきます。

スクリーンショット 2021-11-10 19.10.15


最後にマテリアルとして読み込めば完成です。

スクリーンショット 2021-11-10 19.10.48


こんな感じに出来上がりました。

スクリーンショット 2021-11-10 19.10.59


続いてりんごを作成します。

球から作成していきます。

スクリーンショット 2021-11-11 8.17.43


大まかに形を作成

スクリーンショット 2021-11-11 8.21.18


サブディビジョンサーフェスをかけます。

スクリーンショット 2021-11-11 8.21.46


テクスチャペイントで色をつけていきます。

スクリーンショット 2021-11-11 8.22.22


スクリーンショット 2021-11-11 8.24.34


ダーティ頂点カラーを使用。

スクリーンショット 2021-11-11 8.26.12


色味を調整していきます。

スクリーンショット 2021-11-11 8.32.59


少し黄色も入れてみましたが、どうしても傷んでいる風に見えてしまう...

スクリーンショット 2021-11-11 8.37.32


色味の調整は本当に難しいです。

スクリーンショット 2021-11-11 8.38.17


こんな感じで完成としました。

スクリーンショット 2021-11-11 8.40.43


Three.jsで読み込みます。

3Dモデルをよく見ると若干ガビっています。
ファイルサイズは1MBいかないくらいなので、少し頂点数を増やしてエクスポートしなおします。

スクリーンショット 2021-11-11 8.53.45


かなりいい感じになりました。
バナナの方は頂点数を増やしましたが、りんごの方はスムースシェードをかけたらOKでした。
また、なぜかファイルサイズが両方とも400KB程度に減りました。

スクリーンショット 2021-11-11 8.58.11


テキストを加えて完成です。

今回からTwitterのシェアボタンを追加してみました。

スクリーンショット 2021-11-11 14.23.31



この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
KaitoTakase
社会人4年目。BlenderとThree.js、WebGLが好きです。作成した3Dモデルでウェブサイトをよく作っています。