Three.jsを使って3Dのモーフィングアニメーションを実装する | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは、くりちゃんです。 LIGではフロントエンドエンジニアとして、グラフィカルなWebサイトの実装を担当することや、デザイナーさんから通常のWebサイトにはない、特殊な実装を依頼されることが多いです！ つい先日担当させていただいた「けたくま」オフィシャルサイトの実装では、ある箇所をクリックしたら700以上の画像が上から降ってくるような変わった実装をしました。こういった実装はhtmlとcssでは、パフォーマンスや実装コストを考えるとカバーしきれません。 「けたくま」オフィシャルサイト https://ketakuma.com そのためcanvasタグでcanvas2DやWebGLを使用して実装していますが、WebGLは高度な専門知識が求められ、WebGLのみで3DCGを表現するのは難しいので、いつもThreejsなどのライブラリを使っています。 今回はThreejsのユーティリティクラ