Nuxt和A-Frame VR

问题描述

还有其他人试图将A-Frame VR与Nuxt.js混合吗？我收到错误消息“未定义窗口”。

我到目前为止

1. 通过NPM安装了A框架

2. 使用以下代码创建插件“ plugins / aframe.js”

import Vue from 'vue'
import aframe from 'aframe'
Vue.use(aframe)

1. 更新了nuxt.config.js

plugins: [
    { src: '@/plugins/aframe.js',ssr: false }
  ],

1. 创建了一个组件“ components / Aframe.vue”

<template>
  <a-scene vr-mode-ui="enabled: false">
      <a-entity position="0 0 0">
        <a-camera></a-camera>
      </a-entity>
      <a-entity
        geometry="primitive: torusKnot;"
        scale="2 2 2"
        position="0 1.5 -5"
        rotation="0 45 0"
        material="color:#BBBBBB"
        wireframe
      >
        <a-animation easing="linear" attribute="rotation" repeat="indefinite" dur="30000" to="0 405 0"></a-animation>
      </a-entity>
      <a-sky color="#FDFDFD"></a-sky>
    </a-scene>
</template>

if (process.client) {
  Vue.use(require('aframe'))
}
export default {
  created () {
    aframe.registerComponent('wireframe',{
      dependencies: ['material'],init () {
        this.el.components.material.material.wireframe = true
      }
    })
  }
}

并将该组件包含在我的默认布局中

<Aframe /> 

import Aframe from 'aframe'
export default {
  components: {
    Aframe
  },

解决方法

对于其他在此苦苦挣扎的人来说，这似乎是一种可行的方法。

在nuxt.config.js中添加a-frame vr作为脚本标签

script: [
  {
    src: 'https://aframe.io/releases/0.7.1/aframe.min.js'
  }
]

然后在您的组件中将a帧场景添加为数据字符串

export default {
  name: 'afvr',data () {
    return {
      aframes: [
        {
          scene: '<a-scene vr-mode-ui="enabled: false" embedded><a-entity position="0 -1 3" scale="0.5 0.5 0.5"><a-camera zoom="0.8" fov="80" near="0.001" far="50"></a-camera></a-entity><a-torus-knot color="#e1e1e1" segments-tubular="124" radius="1" radius-tubular="0.1" wireframe="true"><a-animation easing="linear" attribute="rotation" repeat="indefinite" dur="30000" to="360 360 360"></a-animation></a-torus-knot></a-scene>',id: 1
        }
      ]
    }
  }
}

然后将其作为原始HTML呈现在模板中

<div class="aframe" v-for="aframe in aframes" :key="aframe.id" v-html="aframe.scene" />

有花招