i looked through the Ar.js Documentation(https://ar-js-org.github.io/AR.js-Docs/) and tried implementing the Marker Based Example on nuxt.js.
index.vue from my project
<a-scene embedded arjs>
<a-marker preset="hiro">
<a-entity
position="0 0 0"
scale="0.05 0.05 0.05"
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"
></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</template>
<script>
//import Logo from '~/components/Logo.vue'
export default {
components: {
//Logo
}
}
</script>
nuxt.js.config from my project. The important part for this question is where i modify vue.config and the head with.
export default {
vue: {
config: {
productionTip: true,
ignoredElements: [
'a-scene',
'a-entity',
'a-camera',
'a-animation',
'a-sky',
'a-marker'
]
}
},
ssr: false,
/*
** Headers of the page
*/
head: {
title: process.env.npm_package_name || '',
script: [
{
src: 'https://aframe.io/releases/1.0.4/aframe.min.js'
},
{
src:
'https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js'
}
],
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content: process.env.npm_package_description || ''
}
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
css: [],
/*
** Plugins to load before mounting the App
*/
// plugins: ['~/plugins/aframe.js'],
/*
** Nuxt.js dev-modules
*/
buildModules: [
// Doc: https://github.com/nuxt-community/eslint-module
'@nuxtjs/eslint-module',
// Doc: https://github.com/nuxt-community/nuxt-tailwindcss
'@nuxtjs/tailwindcss'
],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios',
'@nuxtjs/pwa'
],
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {},
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {}
}
}
Console from webapp
A-Frame Version: 1.0.4 (Date 2020-02-05, Commit #2b359246)
aframe.min.js:995 three Version (https://github.com/supermedium/three.js): ^0.111.6
aframe.min.js:995 WebVR Polyfill Version: ^0.10.10
webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:8428 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
webpack-internal:///./node_modules/webpack-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client:95 [HMR] connected
aframe-ar.js:3994 AR.js 3.3.1 - trackingBackend: artoolkit
aframe-ar.js:3528 ARjs.Anchor - changeMatrixMode: modelViewMatrix / markersAreaEnabled: false
aframe-ar.js:2023 THREEx.ArMarkerControls: 'markersAreaEnabled' is not a property of this material.
setParameters @ aframe-ar.js:2023
aframe-ar.js:2016 THREEx.ArMarkerControls: 'minConfidence' parameter is undefined.
setParameters @ aframe-ar.js:2016
aframe-ar.js:2 Allocated videoFrameSize 1228800
aframe-ar.js:2 Pattern detection mode set to 1.
aframe-ar.js:2 Pattern ratio size set to 0.500000.
My Problem: The nuxt.js app is working with the camera but it is not responding to the hiro marker or any custom marker and not showing the dinosaurier(here is a working example: https://ar-js-org.github.io/AR.js/aframe/examples/marker-based/basic.html with this marker https://raw.githubusercontent.com/AR-js-org/AR.js/master/data/images/hiro.png).
Have a happy new year,
Philipp