もともとBlenderなどでアニメーションをがついているGLBモデルは、A-Frameを使ってアニメーションを制御することができるので、今回アニメーションを動かしてみます。
A-Frameとは？
A-Frameとは、Webブラウザ上で3DおよびVR（バーチャルリアリティ）コンテンツを簡単に作成するためのオープンソースのWebフレームワークです。
A-Frameは、JavaScriptライブラリであるThree.jsをベースにしており、HTMLのようなマークアップ言語を使って3DシーンやVR体験を構築できる点が特徴です。
アニメーションがついているモデルを準備する
アニメーションがついているglbモデルを準備します。
人型のモデルに対して、簡単にアニメーションつけるにはmixamoがおすすめです。
fbxでしかエクスポートできないので、blenderなどを使ってfbx→glbに変換します。
まずは画面上にglbモデルを表示させる
まずはglbモデルをweb画面上に、表示させます。
こちらを参考に環境を構築してください。
モデルが表示されたのを確認
ディレクトリを作成し、その中にindex.htmlファイルとモデルのglbファイルを入れます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<!-- 3Dモデルの読み込み -->
<a-asset-item id="humanModel" src="model.glb"></a-asset-item>
</a-assets>
<a-entity gltf-model="#humanModel" position="0 0 -3"></a-entity>
</a-scene>
</body>
</html>
作成したディレクトリの場所で、http–serverを実行します。
http-server
ブラウザでhttp://127.0.0.1:8080/を開くと、モデルが表示されるのを確認できます。
aframe-extrasをインポート
glbモデルのアニメーションを動かすにはaframe-extrasが必要になるので、headに記述します。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
<!-- これを追加↓ -->
<script src="https://cdn.jsdelivr.net/npm/aframe-extras@6.1.1/dist/aframe-extras.min.js"></script>
</head>
モデルのa-entityにanimation-mixer属性を追加
モデルのa-entityに対して、animation-mixerを追加します。
何も設定しなければ、追加されている最初のアニメーションが再生されます。
<a-entity
gltf-model="#humanModel"
animation-mixer=""
position="0 0 -3">
</a-entity>
このglbモデルの最初のアニメーション。
ジャンプのアニメーションが再生されているのを確認できます。
アニメーションを設定したい場合
blenderなどでつけたアニメーションは、アニメーションの名前で再生したいアニメーションを変更することができます。
このglbモデルは**「walk」というアニメーションがついているので、「walk」**にします。
animation-mixer="clip: walk"
歩くアニメーションが再生されています。
glbモデルのアニメーションなどを確認したい場合は、glTF Viewerがおすすめです。
全体のコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/aframe-extras@6.1.1/dist/aframe-extras.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<!-- 3Dモデルの読み込み -->
<a-asset-item id="humanModel" src="model.glb"></a-asset-item>
</a-assets>
<a-entity
gltf-model="#humanModel"
animation-mixer="clip:walk"
position="0 0 -3">
</a-entity>
</a-scene>
</body>
</html>
