【制作物共有】3D Dice

制作日

2021年5月11日

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

・webpack
・gsap（初）
・three.js
・GLTFLoader（初）
・intersection-observer
・locomotive-scroll（初）
・swiper

制作について

この制作では4つの初めてに挑戦しました。

・１つ目の挑戦【3Dモデル】

Blenderで作成したサイコロのglTF形式でエクスポートし、Three.jsとGLTFLoaderを使って読み込んでいます。

ただサイコロが表示されているだけではつまらなかったので、ふわふわと浮いている印象をつけたり、マウスに応じて位置をずらしたりしました。

・２つ目の挑戦【慣性スクロール】

二つ目にこの頃気になっていたlocomotive-scrollで慣性スクロールも試してみました。

慣性をつけることでページ全体の印象も大きく変わってきて、ユーザーに良い体験を提供できると思いました。

設定も簡単だったので機会があれば案件で実装したいと思います。

・３つ目の挑戦【gsap】

gsapの存在は前から知っていてアニメーションの幅を広げられると思っていましたが、なかなか挑戦できていなかったので良い経験になりました。

ローディングとメニューに使用し、試行錯誤しながら実装しました。

慣れてくるとコードも視覚的にやりやすくなってこれを知ってしまったらもう使わないことはあり得ないなと感じました。

・４つ目の挑戦【パララックススライダー】

最後にSwiperを使用したパララックススライダーです。

Swiperで簡単にパララックスができると聞いていましたが、実装したことなかったのでやってみました。

使える場面も多くありそうなのでどんどん案件で使っていこうと思います。

以上となります。