Three.jsでシェーダーを書かずにモーフィングアニメーションしてみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは。フロントエンドエンジニアになりたてのぼこです。 今回はThree.jsでモーフィングアニメーションを手軽に実装できる機能を見つけたので、それで遊びたいと思います。モーフィングアニメーションというのは、ある物体が別の物体に切り替わる際に、その過程を補間することでなめらかに変化させるようなアニメーションです。 コードの説明もしていますが、Three.jsのインストールや描画までの基本的な準備の説明は割愛させていただきますので、Three.jsを触ったことがある方向けになります。ご了承ください。 逆に、僕みたいに「Three.jsを触って簡単な立体の描画はできるけど、シェーダーとか意味わかんない、怖い（？）」といった方にはぜひ試していただきたい内容になってます。 今回作るデモ 今回作るデモのCodePenを貼ります。画面内の2つのボタンを押すと、立体がそれぞれの形状になめらかに変化す

[abababababababa]

難しそうだけど、面白そう…！