ブラウザ上で 3D モデルのアニメーションを再生できる簡単なツールを作ってみました。
今回は、3D モデルを読み込み、用意されているアニメーションをブラウザ上で確認できるビューワーです。 インストール不要で、URL を開くだけでアニメーション付きの 3D モデルを再生できます。
作ったもの
以下のページで実際に動作を確認できます。
画面下部の再生ボタンからアニメーションを再生できます。 また、スライダーで再生位置を変更したり、右下のメニューからアニメーションを切り替えたりできます。
Horse の再生画面
今回試した Horse モデルでは、走るアニメーションをブラウザ上で再生できます。
3Dモデルをブラウザで表示できるだけでも面白いですが、アニメーションまで再生できると一気に「ゲーム素材を動かしている」感覚が出てきます。
特に馬のモデルは、現在制作している競馬ゲーム系の表現とも相性が良く、ブラウザ上で簡単に確認できるだけでもかなり便利だと感じました。
なぜ作ったのか
3D モデルの素材サイトでは、モデルをブラウザ上で確認できることがあります。 ただ、自分でもシンプルに 3D モデルとアニメーションを確認できるビューワーを持っておくと、今後の制作で使いやすいのではないかと思いました。
また、今回の制作にはもう一つ大きな目的があります。 それは、AI を活用して、自分のやりたいことを素早く形にする練習です。
最近は、AI を使うことで、思いついたアイデアをかなり短い時間で試作できるようになってきました。 「こういうものを作ってみたい」と思ったときに、すぐに動く形まで持っていけるのは、とても大きな変化だと感じています。
今回の 3D アニメーションビューワーも、完璧なツールを最初から作るというより、まずはブラウザ上で 3D モデルを読み込み、アニメーションを再生できるところまで形にしてみる、という目的で作りました。
たとえば、以下のような用途に使えそうです。
- 3D モデルの動作確認
- アニメーションの確認
- ゲーム制作前の素材チェック
- ブラウザ上での簡易プレビュー
- 3D 表現の実験
- AI を活用した制作フローの練習
Unity や Blender を開かなくても、ブラウザだけでモデルの雰囲気を確認できるのは手軽で良いです。 さらに、AI を使いながら小さく作って試すことで、自分の中にあるアイデアを素早く検証できるのも大きな魅力だと感じました。
模倣元・参考元
今回の Horse モデルは、Poly Pizza の以下のページを参考にしています。
3D モデルは Quaternius さんによるものです。
ブラウザで 3D モデルを動かせる面白さ
ブラウザ上で 3D モデルが動くと、かなり可能性が広がると感じます。
最近は、Web上でもかなりリッチな表現ができるようになっています。 簡単な 3D ビューワー、キャラクター表示、ゲームの試作品、ポートフォリオ、教材など、使い道はいろいろありそうです。
今回のようなツールがあると、3D モデルを「素材として見る」だけでなく、「実際に動かして確認する」ことができます。 アニメーション付きのモデルであれば、歩く、走る、待機するなどの動きをその場で確認できるため、制作前の判断材料としても便利です。
今後やってみたいこと
現時点ではシンプルな 3D アニメーションビューワーですが、今後はもう少し機能を増やしても面白そうです。
- 背景色の変更
- ライトの調整
- カメラ位置のリセット
- モデル情報の表示
- 複数モデルの比較
- アニメーション速度の変更
まずは、ブラウザで 3D モデルを読み込んで、アニメーションを再生できるところまで確認できました。 この小さな実験を、今後の 3D 表現やゲーム制作にも活かしていきたいです。
まとめ
ブラウザ上で 3D モデルのアニメーションを再生するツールを作ってみました。
URL を開くだけでモデルを確認できるので、3D 素材の確認や、ゲーム制作の試作に使いやすそうです。
特に、馬のモデルをブラウザ上で走らせられたことで、競馬ゲーム制作にも応用できそうな感触がありました。 今後も、こういった小さな実験を積み重ねながら、ゲーム制作や Web 上での表現に活かしていきたいと思います。
フィードバックを受けて、ローカルの 3D モデルファイルも開けるようにしました
その後、3D モデリングに詳しい方に見てもらう機会があり、ローカルにある 3D モデルファイルも開けるとよさそうだという話をいただきました。 そこで、ローカルファイルを開ける機能を追加しました。
画面下部の「ローカルファイルを開く」ボタンから、手元のモデルファイルを選択できます。 これにより、あらかじめ用意されているサンプルモデルだけでなく、自分の PC に保存している 3D モデルもブラウザ上で確認できるようになりました。
もともとは、AI を使ってアプリを作ってみること自体が目的の 1 つでした。 実際に作ってみると、思っていた以上にスムーズに形にできたこともあり、その流れでブラウザ上で 3D モデルのアニメーションを再生できるツールとして試作しました。
実用面では、自分で作成したモデルや、手元にあるモデルをそのまま確認できると、3D モデルの確認ツールとしての用途が広がりそうです。
今回の機能追加によって、サンプルモデルの再生に加えて、ローカルのモデルファイルも読み込めるようになりました。 ひとまず、このツールとしての基本的な実装は一通りそろったのではないかと感じています。
なお、ローカルファイルを開く機能は、選択したファイルをブラウザ上で読み込んで表示するものです。 サーバーにファイルをアップロードするものではないため、手元で少し試してみたい場合にも使いやすいかもしれません。
