javascript - Nuxt & A-Frame VR
问题描述
有没有其他人尝试将 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
},
解决方案
对于其他为此苦苦挣扎的人来说,这是一种似乎可行的方法。
在 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" />
有诀窍吗
推荐阅读
- google-maps - 为什么 Google 地图 API 结果不准确?
- php - PHP中if条件变量前为什么要用@
- android - Firebase 服务器已终止移动网络上的上传会话
- mysql - Mysql 字符串连接仅当值存在时
- javascript - 通过自分配键防止组件重用?
- python - 更新滑块值不断使程序崩溃
- azure - 多因素身份验证注册重定向
- regex - 我们可以使用基于lookbehinds的条件吗?
- reactjs - 如何在 React 应用程序中使用 axios 响应解决 TypeScript 错误
- python - 如何在 Python lambda 中安装 TensorFlow Serving Client API?