A-Frameを使ってobjファイルをARで表示する 🐄

己との戦いAR。 pic.twitter.com/1bHUuSggc0
— 君塚史高 (@ki_230) 2020年11月2日

これまではglbファイルを読み込んでいたので、Blenderを使ってファイルを変換していました。

が。A-Frameのドキュメントを読んでいると、objファイルが読み込めそうな気配が。

aframe.io

早速、試してみることにしました。

❶ objファイルを探す

poly.google.com

Googleが3Dモデルのライブラリを公開しているので、ここから探すことにしました。

poly.google.com

来年が丑年なので、牛のモデルを使ってみることにします。
年賀状に使えるかもしれないですし。

❷ コーディング

<a-scene embedded arjs="debugUIEnabled: false" vr-mode-ui="enabled: false">
  <a-assets>
    <!--https://poly.google.com/view/0OToIgkcVM7-->
    <a-asset-item id="cow" src="cow.obj"></a-asset-item>
    <a-asset-item id="mtl" src="cow.mtl"></a-asset-item>
  </a-assets>
  <a-marker type='pattern' url='./pattern.patt'>
    <a-obj-model src="#cow" mtl="#mtl" scale=".1 .1 .1"></a-obj-model>
  </a-marker>
  <a-entity camera></a-entity>
</a-scene>