【制作物共有】3D Room Shadow

制作日

2021年10月11日

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

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

制作について

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

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

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

3D Demo Blender Animation

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

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

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

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

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

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

作成した3Dモデルの中にthree.jsで影をつける方法

以上となります。

3D Demo Animation Shadow