はじめに
8thwallのimage targetを用いることで画像に3Dのオブジェクトを重ねることが可能となります。また面白いのは、コップなどの湾曲した形状にも対応しているということで今回試してみました。
ドキュメント
https://www.8thwall.com/docs/web/#manage-image-targets
3Dファイルを用意する
ポイントは下記のような感じ。
ポリゴン数が 35,000 トリスを超えない
結合されたファイル サイズは 10 MB を超えません
スケールは (1, 1, 1)
画像を登録する
1
2
3
アニメーションglbの設定
A-Frameのanimation mixierを使ったサンプルプロジェクトが用意されているので、こちらを参考につくる
blenderでアニメーションを作成する
runを作成
アニメーション > 「タイムライン」を選択
オブジェクトを動かしてキーフレームをセット
アニメーション > 「ドープシート」を選択
名前をrunに設定する
jumpを作成
新規アニメーションをセット
タイムラインに戻りキーフレームを削除 (xで削除する)
オブジェクトを動かしてキーフレームをセット