3D 360 Gemini Web Viewer｜Gemini3で自作した3Dアニメーションビュアーと360° HDRIパノラマビュアーを合体

前回までにGemini3で自作したWebアプリ２つを合体し、3Dアニメーションモデルを360°パノラマビュアー上で自由にパラメーターを変更して見回せるWebアプリを制作しWordPressサイトにアップロードしたので紹介します。

3D 360 Gemini Web Viewer

Webアプリを開く

以下のリンクをクリックし開きます。

3Dアニメーションモデルを読み込む

3Dモデルファイル（FBX, GLB, glTF）を画面の中央にドラッグ・アンド・ドロップします。アニメーションに対応。データサイズは小さめ（30MBくらいまで）をオススメします。

HDRIパノラマ画像を読み込む

Poly HavenからゴルフコースのHDRIファイルをダウンロードします。

このファイルをビュアー上にドラッグ・アンド・ドロップします。

シーン設定とスクリーンショット

Mixamoデフォールトフィギア

マウス操作と、右の操作パネルのスライダーなどでシーンを設定します。

途中で撮ったスクリーンショット画像は以下です。

Meshy AI Girl

この記事で紹介しているMeshy AIで制作したゴルフスイングをしている3Dアニメーションモデル（FBX）をビュアーにドラッグ・アンド・ドロップしシーンを作成した結果です。

Gemini3で動画生成

上記の「Meshy AI Girl」の章で用いた設定を変更し、グリーンに向かってショットするシーンのスクリーンショットをGemini3にアップロードし、高速モードで動画生成を試みました。

まとめ

Gemini3で自作したWebアプリ２つを合体し、3Dアニメーションモデルを360°パノラマビュアー上で自由にパラメーターを変更して見回せるWebアプリを制作しWordPressサイトにアップロードしたので紹介しています。

Nano BananaでTポーズやAポーズの3Dモデルの画像を生成・編集し、Meshy AIに読み込んで3Dモデル化しFBXファイルに書き出せば、Mixamoに読み込んで3Dアニメーション化できます。

この3Dファイルを今回のビュアーに読み込めば、Poly HavenのHDMI画像を背景に3Dアニメーションシーンの動画や画像が比較的簡単に作成できるのでお試しください。

さらに以下の記事では、このWebアプリを進化させ、レスポンシブWebデザインでモバイル対応した「Dg 3D Viewer」を紹介しています。

参考リンク