見出し画像

【制作物共有】3D Hand

制作日

2021年10月27日


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

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


制作について

今回の制作の目的は「サイトをできるだけ再現すること②」です。

参考とするサイトはこちら

このサイトは弊社で週一で行っているサイト鑑賞で門脇くんが紹介してくれました。


まずはBlenderで手を作成します。

スクリーンショット 2021-10-28 13.53.59


平面で見ると良い感じ

スクリーンショット 2021-10-28 14.00.18


押し出しして凹凸をつけます。

スクリーンショット 2021-10-28 14.12.09


サブディビジョンサーフェスをかけて角を丸くしたら繋ぎ目がおかしくなっていたので作り直します。

スクリーンショット 2021-10-28 14.21.09


今度は大丈夫そうです

スクリーンショット 2021-10-28 17.49.37


サブディビジョンサーフェスをかけても良い感じ

スクリーンショット 2021-10-28 17.56.34


厚みをつけました

スクリーンショット 2021-10-28 18.57.10


初めてにしては上手くできた気がしています。

スクリーンショット 2021-10-28 18.57.18


最後に指を調整したり、角度を調整して完了とします。

次はリギングを行います。

スクリーンショット 2021-10-29 8.06.25


まずは指にボーンを入れます。

スクリーンショット 2021-10-29 8.25.14


手のメッシュとボーンを親子関係にして、ポーズモードでテストしました

スクリーンショット 2021-10-29 8.26.54


しっかり失敗しました。

どうやら指一本ずつ親子関係にしたほうが良さげ。


指一本でテストしてみましたが、これでもだめそうでした。

スクリーンショット 2021-10-29 8.41.45


ウェイトペイントで調整してみます。

スクリーンショット 2021-10-29 8.48.44


まだ失敗しました。少し泣きそうです。

スクリーンショット 2021-10-29 8.49.42


認識が間違ってました。

選択されたボーンへの関連が強いほど赤く、低いほど青くなる、とのことで全く逆でした。

ボーンの設定もやり直し、ウェイトペイントも修正します。(小まめに保存分けてて良かった)

スクリーンショット 2021-10-29 9.10.20


まだ少し荒い部分はありますが、さっきより一本ずつ動かせるようになりました

スクリーンショット 2021-10-29 9.16.08


キーフレームでアニメーションをつけます。

スクリーンショット 2021-10-29 13.54.51


glbでエクスポートして読み込みます。

スクリーンショット 2021-10-29 14.15.07


何かがおかしい...多分厚みとかの問題かな...

ソリッド化で厚みをつけて再度読み込んだらうまくいきました!

スクリーンショット 2021-10-29 14.28.57


デザインを整えます。

スクリーンショット 2021-10-29 17.54.00


完成とします。

Blenderで手のような柔らかみのあるものを作ったのは初めてですが、それなりのものを作れて良かったです。


参考


この記事が気に入ったらサポートをしてみませんか?