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

【制作物共有】3D Dice

制作日

2021年5月11日

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

・webpack
・gsap(初)
・three.js
・GLTFLoader(初)
・intersection-observer
・locomotive-scroll(初)
・swiper

制作について

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

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

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

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

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

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

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

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

・3つ目の挑戦【gsap】

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

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

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

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

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

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

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


以上となります。

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