【webAR】無料のフレームワークを使って平面認識ARを実装する

AR.jsやMindAR.jsなどのwebARを開発できる無料のフレームワークはいくつかありますが、

調べてみると画像認識だったり顔認識しか開発することができないようです。

どうしても床(平面)を認識して3Dモデルを出現させて、近づいたり回り込んだりできないかと調べてみたらmodel-viewerのARが感度が高くてよかったので実装してみます。

model-viewerとは
まずはhtmlファイルを用意
model-viewerをインポート
model-viewerタグ
全体

model-viewerとは

Webブラウザで3Dモデルを表示するためのHTMLタグです。これはGoogleが開発したオープンソースのプロジェクトで、Web上で簡単に3Dモデルを表示したり、操作したりすることができるようになっています。

ARも開発できます！

3D model-viewer embed

Neil Armstrong's Spacesuit from the Smithsonian Digitization Programs Office and National Air and Space Museum

まずはhtmlファイルを用意



<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

model-viewerをインポート

model-viewerのモジュールをインポート




<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js"></script>

model-viewerタグ

src属性にモデルのパスを記述します。

ar属性で、AR機能を有効にします。

shadow-intensit属性はモデルの影の度合いを設定。

camera-controls属性を書き足しておけば出現したモデルをタップで回転、大きさの変更、位置の移動などのができるようになります。



 <model-viewer 
 　alt="" 
   src="ここにモデルのパスを記述する" 
   ar
   shadow-intensity="1" 
   camera-controls 
　 touch-action="pan-y">
 </model-viewer>

全体

HTMLの全体はこのようになります。

デプロイしたあと、webサイトのモデルの右下あたりの四角いボタンを押せば、カメラが起動してARが出現します。





<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Import the component -->
    <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js"></script>

    <!-- Use it like any other HTML element -->
    <model-viewer 
        alt="" 
        src="ここにモデルのパスを記述する" 
　　　　ar
        shadow-intensity="1" 
        camera-controls touch-action="pan-y">
    </model-viewer>
</body>
</html>