aframe hiro 标记不适用于 nuxt.js

如何解决aframe hiro 标记不适用于 nuxt.js

我浏览了 Ar.js 文档 (https://ar-js-org.github.io/AR.js-Docs/) 并尝试在 nuxt.js 上实现基于标记的示例。

index.vue 来自我的项目

  <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 来自我的项目。这个问题的重要部分是我在哪里修改 vue.config 和头部。

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) {}
  }
}

来自 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.

我的问题：nuxt.js 应用程序正在使用相机，但它没有响应 hiro 标记或任何自定义标记，也没有显示恐龙（这是一个工作示例：https://ar-js-org.github.io/AR.js/aframe/examples/marker-based/basic.html 与此标记{ {3}}）。

新年快乐，

菲利普