Nuxt & A-Frame VR答案

【问题标题】：Nuxt & A-Frame VRNuxt & A-Frame VR
【发布时间】：2020-12-02 12:29:09
【问题描述】：

有没有其他人尝试过将 A-Frame VR 与 Nuxt.js 混合使用？我收到错误“未定义窗口”。

目前为止

通过 NPM 安装 A-Frame
使用以下内容创建了一个插件“plugins/aframe.js”

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

更新了 nuxt.config.js

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

创建了一个组件“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
  },

【问题讨论】：

标签： javascript vue.js nuxt.js aframe virtual-reality

【解决方案1】：

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

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

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

然后在您的组件中添加 a-frame 场景作为数据字符串

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" />

成功了

【讨论】：