3Dアニメーションと360°背景を組み合わせたWebビュアーをGemini3で作成し公開

Meshy AIで作成した3DモデルをMixamoでアニメーション化しダウンロードしたFBXを、ドラッグ・アンド・ドロップで読み込んで、各種設定をマウスやキーボードとスライダーで操作できる3D Webビュアーを紹介します。

Poly Havenからダウンロード（またはURL指定）したHDMI画像や、画像生成AIで生成した擬似的なパノラマ画像をドラッグ・アンド・ドロップで読み込んで360°背景として使えます。

また、シーンを設定した後で、オプション設定で「キーボード操作」をオンにし、Shift+数字キーを押すことで、設定ファイル（JSON）をローカル保存ができます。（デフォールトで1〜3はプリセットで使用済み）

それを画面にドラッグ・アンド・ドロップすれば、保存した時点のシーン設定が再現できます。また、数字キーを押せば、プリセットの「1〜3」だけでなく、一時的にブラウザーに保存されるシーンも呼び出せます。

更新履歴

Ver.1.2 2026.01.13 - 設定パネルの数値更新不具合を修正
Ver.1.2 2025.12.14 - 初期画面へのD&D後の表示を改善
Ver.1.1 2025.12.11 - モバイルデバイスでの操作性を改善
Ver.1.0 2025.12.10 - 初版リリース

目的と用途

画像や動画の生成AIで作品づくりを経験して感じるのは、試行錯誤の段階でも生成AIサービスの課金が発生したり、一日に生成できる回数が制限されたりで、3DCGで作品づくりをしていた頃に比べると不便に感じます。

そこで、画像や動画生成AIの元になる画像や動画を、Meshy AIとMixamoによる3Dアニメーションや、Poly Havenのパノラマ背景を組み合わせて、シーンの試行錯誤を行えるWebビュアーをGemini3 Pro Canvasで制作しました。

このWebビュアーを「Dg 3D Viewer」と名付けましたが、URLをブラウザーで開けば誰でも使えるようにしました。

Dg 3D Viewer

Meshyからダウンロードした3Dファイル

MeshyからFBX（またはZIP）形式でダウンロードしたファイルをMixamo
に読み込ませ、アニメーション化してダウンロードしたFBXファイルを画面にドラッグ・アンド・ドロップしてお使いください。

使用方法（デスクトップ）

「Dg 3D Viewer」を開いた後で、ブラウザーのブックマークに登録しておけば、すぐに呼び出せます。使用中にブラウザーの「再読み込み」ボタンをクリックすれば、初期画面に戻ります。

「サンプルを読込」ボタンをクリックすると、サンプルファイルを読み込んで、サンプルシーンが開きます。

右上の「目」のアイコンをクリックすると、操作パネルと左下のメッセージが消え、タイトルと目のアイコンがウォーターマークになるので、スクリーンショットや画面録画に使うと便利です。

「表示モード」を切り替えてスクリーンショットや画面録画を行えば、生成AIに事前に読み込ませる際の画像や動画の作成に便利です。

「オプション…」をクリック。

オプション設定

「キーボード操作」をオンにすると、キーボードで各種操作が可能になります。

「キー操作感度」スライダーを動かすと、キー操作に対する画面の動きの速さなどが変わります。例えば、細かくカメラを回転させたり、ゆっくりズームさせたい場合は、スライダーを左に動かします。

「自動回転速度」スライダーで、「Shift+左右キー」を押した時の自動回転速度を調整できます。

スペースキーを押すと、アニメーションが停止・開始できます。

数字キーを押すとシーン設定を呼び出せます。「1〜3」はプリセットシーンの呼び出しに使います。「0」は「設定をリセット」と同じで、初期設定に戻します。ローカル保存は「Shift+数字キー」で行います。（ブラウザー内部にも一時的に保存）

「URLから背景を読込」をクリックすると、Poly HavenのHDRIアセットのURLをコピーすれば自動的に背景画像を読み込めます。（4K解像度。他の解像度はダウンロードしてからドラッグ・アンド・ドロップ）

使用方法（モバイル）

スマートフォンやタブレットでは、レスポンシブWebデザインにより画面デザインと操作方法がモバイルデバイスに合わせて自動的に切り替わります。

・初期操作

「サンプルを読込」をタップ。

右上の目のアイコンをタップ。

・画面タッチ操作

1. シーンの回転：一本指ドラッグ

2. モデルの移動：二本指ドラッグ

3. シーンのズーム： 二本指ピンチ

4. アニメーションの停止・再開：一本指シングルタップ

5. シーンの自動回転・停止（左方向）：二本指シングルタップ

6. シーンの自動回転・停止（右方向）：二本指ダブルタップ

7. 仮想テンキー表示：一本指ダブルタップ

「1〜3」をタップすることでプリセットシーンを呼び出します。「4〜9」をタップすれば一時的に保存したシーンを呼び出せます。（「4〜9」の長押しでシーンを一時的に保存）

「0」をタップすれば「設定をリセット」と同じく、初期設定に戻します。

「キーボード操作」をオンにすれば、「キー操作感度」と「自動回転速度」を調整できます。（モバイルでは、「キーボード操作」がオフの時でもすべての画面タッチ操作は可能）

「URLから背景を読込」をタップすれば、Poly HavenサイトのHDMIアセットのページのURLをコピーすることで背景を読み込めます。（他のサイトのHDM, JPEG, PNG形式のパノラマ画像のURLでもOK）

・ファイルのドラッグ・アンド・ドロップ

（Androidスマートフォンの例）

1. Chromeアプリとファイルマネージャーアプリを開いておく

2. 画面下から上にスワイプし、２つのアプリが見えるようにする

3. Chromeアプリを長押しし、画面分割アイコンをタップ

4. ファイルマネージャーアプリをタップ

5. ファイルマネージャーの「Download」フォルダーのファイル（今回は.fbx）を長押しし、ファイルアイコンが表示されたらChrome画面にドラッグ・アンド・ドロップ

6. Chromeアプリを全画面表示

操作デモ動画

デスクトップ

以下の動画は約4分40秒あります。

モバイル

以下の動画は約2分あります。

まとめ

Meshy AIで作成した3DモデルをMixamoでアニメーション化しダウンロードしたFBXを、ドラッグ・アンド・ドロップで読み込んで、各種設定をマウスやキーボードとスライダーで操作できる3D Webビュアーを紹介しています。

Poly HavenからダウンロードしたHDMI画像や、画像生成AIで生成した擬似的なパノラマ画像をドラッグ・アンド・ドロップで読み込んで360°背景として使えます。

Gemini3 Pro Canvasで、手間はかかりますが、ある程度使えるWebアプリを自力で制作できるようになったので、今後はDAZ StudioやBlenderで制作した3Dアニメーションモデルを使えるようにしたいと思います。

参考リンク