【Nuxt2】Three.jsとAR.jsを動かす

準備

nuxt.config.jsに設定を追記する

nuxt.config.js に Three.js と AR.js を使うための設定を追加します。

”head”内の”script”に”Three.js”と”AR.js”があるURLを追加します

export default {  head: {    script: [    // Three.js 読み込み    {src: "https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.js"},    // AR.js 読み込み    {src: "https://raw.githack.com/AR-js-org/AR.js/3.3.1/three.js/build/ar.js"},    ],  },}

pages単位で読み込もうとすると、うまくモジュールが認識されず使うことができません

解決策があるようなので模索中です...

camera_para.datとhiro.pattを配置する

AR.js と Three.js を利用する場合は、少なくともカメラの構成ファイルが必須となります

以下から構成ファイルをダウンロードすることができます

さらにマーカーベースのARの場合、マーカーファイルも配置する必要があります

Nuxtの場合、これらのファイルは”static”フォルダの下に配置しておきましょう

project`--- static  |--- camera_para.dat  `--- hiro.patt

これで最低限の準備が整いました！ 🎉