【制作物共有】3D Room Shadow
見出し画像

【制作物共有】3D Room Shadow

制作日

2021年10月11日


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

・Nuxt
・Typescript
・gsap
・three.js
・GLTFLoader


制作について

今回の制作の目的は「Blenderで作成したアニメーションをサイト上で動かし、かつ影をつけること」です。

前回作成した3D Roomはあくまでもアニメーションの再生を第一目標にしていて影について考えられていませんでした。

いくら3Dとはいえ、影がないとのっぺりした印象になります。

スクリーンショット 2021-10-26 10.04.44

新しく作成した3Dモデルが下記になります。

スクリーンショット 2021-10-26 10.07.35

また、今回はライトも一緒にglTFに入れてエクスポートしてみました。

スクリーンショット 2021-10-26 10.08.47

ライトもエクスポートする場合はPunctualライトにチェックを入れる。

スクリーンショット 2021-10-26 10.09.53


Three.jsで3Dモデル、アニメーション、影を表示します。

スクリーンショット 2021-10-26 10.12.14

各ボタン(About me、Works...)をクリックすると拡大するアニメーションをつけています。

影をつける方法についてはZennにまとめています。

以上となります。


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
社会人3年目。Webプログラマー目指して勉強中。