Fusion360で作ったモデルをAR.jsで表示させる

Webで表示するARモデルを作ったので、表示するまでのざっくりした覚え書き。
間違った方法・非効率な方法が満載な気がするので、とりあえず形になればいい、という人以外は真似しないでください。

対象：Fusion360を使ったことがあり、3DCGソフトが全くわからず、色つきのARを手軽に作りたい人

Fusion360でモデルを作る

まずは表示するモデルを作ります。
モデルが複数のボディ・コンポーネントで作成されていると、Webで表示する際に重なった部分がぶれてしまうようなので、結合しておくといいかも。

Fusion360で外観を指定する

大まかに外観を指定します。
ここで指定した外観は、実際に表示するとき色味や質感がかなり変わってしまうので、適当でOK。
色分けができたら、FBX形式でエクスポートします。

Blenderで色や質感を調整

Blenderをインストールします。
Blenderを使いこなせればBlenderだけで全部なんとかなりそうな気がしますが、私はメニューに書かれた用語から各画面まで、何が何だかさっぱりでした。
今後使う予定があるなら学ぶと良いのでしょうが、ここは学習コストをかけないことにしました。
大まかな手順は以下。

FBXファイルをインポートします。（軸の方向がFusion360と違います。手動でYが前にするといいかも。）
対象の色を設定している部分を調整します。
glTF2.0（glb）でエクスポートします。

※ しっかり色分けしなくてもいい場合は、fbxからglbに変換するWebサービスを使うと簡単です。
使える外観が限られているのかわかりませんが、いろいろ失われがちで私は断念しました……。

マーカーを用意する

オリジナルのマーカーを使用する場合は、マーカー画像を作ります。普通の画像を用意すれば以下のジェネレータで簡単に作れるので、オリジナルにした方がたぶん楽しいです。

jeromeetienne.github.io

公開環境を用意する

SSLで暗号化された公開環境が必要になります。 NetlifyとBitbucketというサービスを組み合わせて使うのが無料で良さそう。

gitを使う必要があるので、インストールして基本的な使い方を学びます。

HTMLを書く

<html>
  <head>
    <title>AR test</title>
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
    <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.7/aframe/build/aframe-ar.js"></script>
  </head>
  <body>
    <a-scene embedded arjs="debugUIEnabled:false; sourceType:webcam; debpatternRatio:0.50;" vr-mode-ui="enabled: false" renderer="gammaOutput: true;">
        <a-marker type="pattern" url="pattern-marker.patt" >
          <a-gltf-model src="ar-model.glb" scale="0.4 0.4 0.4" position="0 0 0" rotation="0 0 0"></a-gltf-model>
        </a-marker>
        <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

scaleで大きさ、positionで位置、rotationで角度を調整します。マーカーの生成時にPattern Ratioを変更した場合は、debpatternRatioの値をあわせます。ライトは指定しなくても設定されていますが、変更したい場合は以下を参考に。

https://aframe.io/docs/1.0.0/primitives/a-light.html#attributes_intensity

カメラの設置方法はググったら他の書き方も見られましたが、私がうまくいったのは上記の記述方法でした。（公式ドキュメントが見つけられなかったため手探り）

他にもアニメーション等も設定できるようです。