Nuxt &A-帧VR
Nuxt &A-帧VR
提问于 2020-08-12 17:34:37
有没有其他人试图将A帧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
},回答 2
Stack Overflow用户
发布于 2020-08-17 04:04:22
对其他人来说，在这方面挣扎似乎是一种可行的方法。
在nuxt.config.js中添加一个框架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" />有办法吗
Stack Overflow用户
发布于 2022-04-07 10:14:06
我找到了一种使用SPA模式来实现这一目标的干净方法。您将需要创建一个模块来拦截路由器请求到包含您的A帧代码的页面。此方法将使A帧只加载客户端，因此A帧将只能访问客户端对象，如窗口。
步骤1:创建一个新模块，任意命名它，并确保它拦截对页面的调用-在本例中，该页面在页面下被命名为vrdemo.vue。确保将您的模块放在正确的模块文件夹中:root-> module ->NavModes.js
export default function () {
this.nuxt.hook('render:setupMiddleware', (app) => {
app.use('/vrdemo', (req, res, next) => { //Do NOT load vrdemo on the server-side due to use of client only a-frame JS libraries
res.spa = true
next()
})
})
}步骤2:在nuxt.config中注册模块
modules: [ '~/modules/navmodule'],步骤3:在模块拦截的页面中导入A帧
<template>
//use A-Frame
</template>
<script>
import aframe from "aframe";
export default {
//stuff
};
</script>此外，我还制作了一些使用A框架的组件，只要我从这个页面调用该组件，就会加载A框架脚本，并且我可以使用它。
您将需要确保您已经安装了一个框架(npm安装aframe)到您的项目使用npm或纱线的工作。祝好运!
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63381910
复制相关文章
相似问题
腾讯云开发者
