みかづきブログ・カスタム

基本的にはちょちょいのほいです。

トップ > A-Frame > A-Frameを使って爆速でつくったWebARにアニメーションを付ける 🥊

A-Frameを使って爆速でつくったWebARにアニメーションを付ける 🥊

A-Frame Blender

f:id:kimizuka:20201102222938p:plain

blog.kimizuka.org

👆の記事の続編です。

前回は、実寸代のARで分身の術を作ってみた次第ですが、分身（3Dモデル）はピクリとも動いていませんでした。なので、今回は3Dモデルにアニメーションを付けてみようかと思います。


3Dモデルにアニメーションを付ける

3Dモデルにアニメーションをつける場合、まずリギングといって3Dモデルに骨を入れたり、関連付けを行ったりしなければなりません。
割と面倒な作業なのですが、なんとこちらのウェブサイトを使うと、すんなりと自動でリギングが完了します。

www.mixamo.com

Adobeが作っているサイトなのですが、3Dモデルをアップロードして、ぽちぽちクリックするだけでリギングが完了するとてもお手軽なサイトです。
3DモデルとテクスチャをZIPにまとめてアップロードすると、しっかり設定してくれます。至れり尽くせり。
しかも、リギングだけではなく、アニメーションの設定までできるので、このサイトを使ってさくっとアニメーションを設定してしまいましょう。

👆もMixamoをつかってさくっと設定しました。

設定が完了したらfbx形式でダウンロードします。


Blenderでfbxを読み込み、glbで書き出す

アニメーションを設定したfbxをBlenderで読み込んで、glbで書き出します。
書き出し設定は特に変更しなくて大丈夫です。

が。

僕の場合は、Mixamoからダウンロードしたfbxをglbで書き出すと、テクスチャが半透明になってしまいました。

Blender上で、テクスチャを設定し直したところ解決したので、そもそもMixamoにアップする際にテクスチャを一緒に上げる必要はなかったのかもしれません。


animation-mixerを設定する

あとは前回同様、A-Frameを使って読み込めばOKなのですが、アニメーションを設定するためには aframe-extras.min.js も読み込む必要があります。

https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js

こちらを読み込んで、animation-mixerを設定すればそれだけで3Dモデルがアニメーションするようになります。お手軽ですね。

ソースコード

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>AR DEMO</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover, shrink-to-fit=no" />
  <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  <script src="https://raw.githack.com/AR-js-org/AR.js/3.3.1/aframe/build/aframe-ar-nft.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
  <style>
    * {
      margin: 0; padding: 0;
    }

    body {
      overflow: hidden;
      cursor: none;
    }
  </style>
</head>
<body>
  <a-scene embedded arjs="debugUIEnabled: false" vr-mode-ui="enabled: false">
    <a-assets>
      <a-asset-item id="boxing" src="boxing.glb"></a-asset-item>
    </a-assets>
    <a-marker type='pattern' url='./pattern.patt'>
      <a-entity gltf-model="#boxing" animation-mixer></a-entity>
    </a-marker>
    <a-entity camera></a-entity>
  </a-scene>
</body>
</html>