🐕

好きなアニメキャラクターをWeb上で自由自在に3Dダンスさせる方法（Three.js + DeepMotion）

に公開
JavaScript
Next.js
Three.js
tech

Video to GIF from Rakko Tools.gif

好きなアニメキャラクターをWeb上で自由自在に3Dダンスさせる方法（Three.js + DeepMotion）

アニメが好きで自分の好きなアニメキャラクターに最近の人気な曲に合わせて自由自在にダンスさせて動かしたいという気分になったので、今回それをtreee.jsで実現しました。
※作成期間は２日でそんなに難しい内容ではありません

完成したデモはこちら👇（「Dance Motion」を押してください！🙇）
デモサイト
Github
https://github.com/masaaki-imai/3D-anime

気に入ったらぜひ「いいね」をお願いします！😊

📌 使用した技術・ツール

  • Three.js（3D表示ライブラリ）
  • DeepMotion（動画からモーションを生成するSaaS）
  • Vroid Studio（アニメキャラクター作成）
  • Cobalt（YouTube動画ダウンロード）
  • Veed（動画編集）

📌 完成までの流れ

以下の手順で進めます。

  1. ダンスモーションの元動画を決める
  2. 動画をダウンロード・加工する
  3. DeepMotionでモーションを生成する
  4. Vroid Studioでキャラクターを作成・GLB形式に変換する
  5. Three.jsでキャラクターを動かす

① ダンスモーションの元動画を決める

今回は以下の動画を使用しました。

② 動画をダウンロード・加工する

YouTubeの動画をダウンロードするには、以下のようなサービスを使います。

  • Cobalt（おすすめ）
  • その他のYouTubeダウンロードツールでもOKです。

動画加工のポイント

DeepMotionでモーションを生成するためには、以下の条件を満たす必要があります。

  • 動画の長さ：20秒以内
  • フレームレート（FPS）：30FPS

動画編集には以下のツールがおすすめです。

  • Veed
  • その他の動画編集ソフトでもOKです。

③ DeepMotionでモーションを生成する

DeepMotionは、動画から3Dモーションを自動生成してくれる便利なサービスです。

  • DeepMotion公式サイトで無料アカウントを作成します。
  • 加工した動画をアップロードし、モーションを生成します。
  • 生成されたモーションをGLB形式でダウンロードします。

※DeepMotionはAPIも公開しているため、コードベースで自動化することも可能です（長期的な運用におすすめ）。

④ Vroid Studioでキャラクターを作成・GLB形式に変換する

アニメキャラクターを作成するには、Vroid Studioが便利です。

  • Vroid Studio公式サイトから無料でダウンロードできます。
  • 作成したキャラクターをVRM形式でエクスポートします。
  • VRM形式をGLB形式に変換するには、Webでいろいろありますがオンライン変換ツールを使います。

⑤ Three.jsでキャラクターを動かす

Three.jsを使って、ブラウザ上でキャラクターを動かします。

プロジェクト構成　サンプル

3d-app
├── public
│   └── 3d
│       ├── idle.mp3
│       ├── kakeruze.glb
│       ├── kawaii22.glb
│       ├── motion.glb
│       └── original_movie.mp4
├── src
│   └── app
│       ├── globals.css
│       ├── layout.tsx
│       └── page.tsx
├── package.json
└── tsconfig.json

🎉 終わりに

以上の手順を応用すれば、自分の好きなアニメキャラクターを自由自在に動かすことが可能です。
ぜひ自分だけのオリジナル作品を作ってみてください！
以上です！

Discussion