[Tips] AR.js + A-FrameをNuxt.jsで利用する

WebARを比較的に簡単に実装できるライブラリとして人気のAR.jsとA-Frameですが、こちらをNuxt.jsで使うためのリファレンスがあまり存在せず若干躓いたのでメモとして残しておきます。

ここでは、Ar.js公式DocumentのImage Tracking Exampleを動かしていきます。

AR.js Documentation

1. ローカル開発環境の設定

Hostの変更

ローカル開発環境にスマホからアクセスして動作確認を行うため、hostをlocalhostから0.0.0.0に変更しておきます。ポート番号は適宜指定してください。

server: {
   port: 8000, 
   host: '0.0.0.0'
 },

ローカル開発環境SSL化

スマホのカメラを動作させるため、ローカル開発環境をSSL化します。

具体的な方法についてはここでは割愛させていただきますが、こちらの記事を参考に自己証明書の発行及びローカル開発環境のSSL化を行うことができました。

Nuxt.jsでSSL(https)化する方法 - もぐもぐプログラミング

2. ライブラリの読み込み

nuxt.config.jsのheadプロパティ、script配列内で必要なライブラリの読み込みを行います。

head: {
   title: Nuxt.js meets AR.js,
   meta: [
     { charset: 'utf-8' },
     { name: 'viewport', content: 'width=device-width, initial-scale=1' },
     { hid: 'description', name: 'description', content: Nuxt.js meets AR.js Sample Project}
   ],
   link: [
     { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
   ],
   script: [
     { src: 'https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js' },
     { src: 'https://raw.githack.com/AR-js-org/AR.js/master/three.js/build/ar-nft.js' }
   ]
 }

3. コンテンツの記述

pages/index.vueのtemplateタグ、styleタグにそれぞれ以下の内容を記述します。

<template>
  <div class="container">
    <div class="arjs-loader">
     <div>Loading, please wait...</div>
    </div>
    <a-scene
      vr-mode-ui="enabled: false;"
      renderer="logarithmicDepthBuffer: true;"
      embedded
      arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
    >
      <a-nft
        type="nft"
        url="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/trex-image/trex"
        smooth="true"
        smoothCount="10"
        smoothTolerance=".01"
        smoothThreshold="5"
       >
        <a-entity
          gltf-model="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
          scale="5 5 5"
          position="50 150 0"
        >
        </a-entity>
      </a-nft>
      <a-entity camera></a-entity>
    </a-scene>
  </div>
</template>

<style>
 .arjs-loader {
   height: 100%;
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background-color: rgba(0, 0, 0, 0.8);
   z-index: 9999;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .arjs-loader div {
   text-align: center;
   font-size: 1.25em;
   color: white;
 }
</style>

4. 動作不具合の原因と回避策

この状態で動作させてみると、エラーこそ発生しませんが、オブジェクトが何も表示されない状態になってしまいます。

ログを見てみるとどうやらimageのTrackingはなされているようです。

この問題に関して既にGitHubにてissueが立っていました。

Integrations with JS Frameworks 揃 Issue #537 揃 jeromeetienne/AR.js

原因

どうやらA-Frameの描画領域がbody直下に生成されるのを想定していることが原因のようです。

Nuxt.js側で自動生成される  #__nuxt  や  #__layout  配下にキャンバスが生成されてしまうことで画面の高さが取れずheightが0になってしまい、表示がなされないということのようでした。

回避策

これを回避するための一番手取り早い方法は、AR.jsの表示エリアである.a-scene の上位にあるノードに全てに対し、height : 100%を指定してしまうことです。

default.vue のstyleに以下を追記します。

body, #__nuxt, #__layout, .container{
 height: 100%;
 margin : 0px;
 overflow: hidden;
}

ここでは.container を指定していますが、該当のコンポーネントの最上位ノードのクラス名を適宜指定してください。

これで無事Nuxt.jsでAR.jsとA-Frameを使ってWebARを実現することができるようになりました。

プロジェクトを起動し、こちらの画像をスキャンするとT-REXが現れます。