Three.jsを使った2Dアニメーションの実装
公開日 : 最終更新日 :
- コーディング
Three.jsのWebサイトと聞くと3Dサイトがぱっと思ってしまうことが多いかと思いますが、2Dアニメーションをゴリゴリに動かしているサイトでもThree.jsが多様されています。
Three.jsを使用した2Dアニメーションのサイト例とどんな感じで作られているのかをざっとまとめてみましたので、
参考にしてみてください！
こちらの記事もおすすめです。
目次
【サイト】
みさとと。
超有名制作プロダクションの株式会社SHIFTBRAINに制作されたサイトです。
FWA、Awwwards、CSS Design Awardsなど数々の賞を受賞しており、Web界隈ではかなり話題になりました。
Three.jsをうまく使って、サイトを構築しています。
https://www.town.shimane-misato.lg.jp/misatoto/
GUCCI FLORA
こちらもThree.jsで2Dアニメーションをうまく表現しています。
加えてGSAPというJSライブラリーも使用しているようです。
アニメーションPNGもうまく使っています。
https://florafantasy.gucci.com/
【制作方法】
Three.jsの2Dアニメーション
Three.jsで2Dアニメーションを制作するときはオブジェクトの配置を3Dに考えることが非常に重要です。
全体像を3Dで考えられるようになると一気に理解が進みます。
とても参考になるものがCodePenにありましたので、下記見てみて下さい！
See the Pen threejs parallax by Yusuke Kawamoto (@novogrammer) on CodePen.
上記でも分かるように奥行きが存在し、それが動きと直結します。
GSAPを学ぼう
GSAPはCSS/HTML5 Canvas/WebGLなどさまざまなアニメーション作成に利用できます。類似トゥイーンライブラリよりも高機能であり、かつ実行パフォーマンスも優れているのが魅力的です。
Three.jsでの2Dアニメーションはもちろん、Three.jsで動きをつける時にGSAPを使えると非常に楽に動きを制御することが出来ます。
GSAPに関しては下記記事がとても参考になるので、ぜひ使い方を学んで見て下さい！
以上、ざっくりと2Dアニメーションを制作するのに必要な知識を紹介させて頂きました！
たくさん勉強して素晴らしいサイトをどんどん作っていきましょう！
：弊社ではwebGLに力を入れております。
案件のご相談があればお気軽に下記問い合わせフォームからご相談下さいませ。
