如何解决Nuxt和A-Frame VR
还有其他人试图将A-Frame VR与Nuxt.js混合吗?我收到错误消息“未定义窗口”。
我到目前为止
-
通过NPM安装了A框架
-
使用以下代码创建插件“ 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
},
解决方法
对于其他在此苦苦挣扎的人来说,这似乎是一种可行的方法。
在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" />
有花招
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。