今回紹介する2Dのモーフィングアニメーションは実務でも実装する機会が多く、先日リリースした下記のフロンティア株式会社様のコーポレートサイトでも似たような実装を行いました。それぞれのセクションやページで2Dのパーティクルが様々な形に変化していきます。こういった動きは躍動感が出ますよね。 それでは早速実装していきます。 デモ 用意したデモはこちら。時間経過でパーティクルが丸、四角、星など様々な形に変わっていきます。今回の実装のポイントはイラストレーターで作成したパーティクルから座標を抜き出しているところです。そちらを中心に解説していきたいと思います! See the Pen Threejs Points 2D Mofing by Hisami Kurita (@hisamikurita) on CodePen. Step1 イラストレーターでパーティクルの座標を指定する まず、下準備としてどん
![Three.jsを使って2Dのモーフィングアニメーションを実装する | 株式会社LIG(リグ)|DX支援・システム開発・Web制作](https://cdn-ak-scissors.b.st-hatena.com/image/square/3549032b4b016c86f1f1e8e55bcdcded66a3f35f/height=288;version=1;width=512/https%3A%2F%2Fliginc.co.jp%2Fwp-content%2Fuploads%2F2021%2F11%2F1310874-1.png)