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

今回紹介する2Dのモーフィングアニメーションは実務でも実装する機会が多く、先日リリースした下記のフロンティア株式会社様のコーポレートサイトでも似たような実装を行いました。それぞれのセクションやページで2Dのパーティクルが様々な形に変化していきます。こういった動きは躍動感が出ますよね。 それでは早速実装していきます。 デモ 用意したデモはこちら。時間経過でパーティクルが丸、四角、星など様々な形に変わっていきます。今回の実装のポイントはイラストレーターで作成したパーティクルから座標を抜き出しているところです。そちらを中心に解説していきたいと思います！ See the Pen Threejs Points 2D Mofing by Hisami Kurita (@hisamikurita) on CodePen. Step1 イラストレーターでパーティクルの座標を指定する まず、下準備としてどん