【制作物共有】3D Room Shadow
制作日
2021年10月11日
使用しているプラグインなど
・Nuxt
・Typescript
・gsap
・three.js
・GLTFLoader
制作について
今回の制作の目的は「Blenderで作成したアニメーションをサイト上で動かし、かつ影をつけること」です。
前回作成した3D Roomはあくまでもアニメーションの再生を第一目標にしていて影について考えられていませんでした。
いくら3Dとはいえ、影がないとのっぺりした印象になります。
新しく作成した3Dモデルが下記になります。
また、今回はライトも一緒にglTFに入れてエクスポートしてみました。
ライトもエクスポートする場合はPunctualライトにチェックを入れる。
Three.jsで3Dモデル、アニメーション、影を表示します。
各ボタン（About me、Works...）をクリックすると拡大するアニメーションをつけています。
影をつける方法についてはZennにまとめています。
以上となります。