ブラウザ上で 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上での表現に活かしていきたいと思います。
