見出し画像

WebAR (AR.js A-Frame)を試してみる

iwase

今回はwebでAR.jsとA-Frameを使って、webで簡単なARを試してみます。

⓵マーカー作成

認識させるマーカーをAR.js Marker Trainingで作成していきます。

DOWNLOAD MARKERボタンを押して.pattファイルをダウンロード

pattern-markerのコピー

⓶3D モデルダウンロード

フリーの3D モデルをPolyからおとしてきます。

⓷ HTMLの用意

コードはこんな感じで、head 部分でAR.js と A-frameを読み込んでます。

index.html

<!DOCTYPE html>
<html>
    <title>WEB AR テスト</title>    
    <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale = 1">
       <script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
       <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>    
    </head>
    <body style='margin: 0px; overflow: hidden;'>
       
       


    </body>
</html>

後は、

<a-scene embedded arjs="debugUIEnabled:false;" vr-mode-ui="enabled: false">
   <a-assets>
        <a-asset-item id="foxObj" src=".obj"></a-asset-item>
           <a-asset-item id="foxMat" src=".mtlパス"></a-asset-item>
        </a-assets>
        <a-marker preset="custom" type="pattern" url=".pattファイルパス">
           <a-obj-model id="fox" src="#foxObj" mtl="#foxMat" position="0 0 0"></a-obj-model>
        </a-marker>
    <a-entity camera></a-entity>
</a-scene>

src部分に⓵⓶でダウンロードしてきた.pattと3Dモデルのパスを合わせてindex.htmlのbodyに入れたら完成です。

テストするのにカメラにアクセスするためhttpsの環境が必要なのでNetliflyとかに置いて試してみます。

めっちゃ簡単

iOS の画像

他にもアニメーションさせたりと色々できそうなので試してみます。

この記事が気に入ったらサポートをしてみませんか？