a-scene 的宽度错误。 ar.js 的框架使用带有离子的 Vue
Wrong width of a-scene. a-frame with ar.js using Vue with ionic
我目前正在使用 Vue 结合 Ionic 进行 AR 项目。为此,我目前使用的是 Ar.js 的 A-Frame。在我的物理设备上 (iPhone) 我已经获得了视频输出,但视频输出只有设备宽度的 1/3。其余为空白。
如何让视频输出超过整个设备宽度?
main.ts
import "aframe";
import 'ar.js';
const app = createApp(App)
.use(IonicVue)
.use(router);
router.isReady().then(() => {
app.mount('#app');
});
App.vue
<template>
<ion-app>
<ion-router-outlet />
</ion-app>
</template>
<script lang="ts">
import { IonApp, IonRouterOutlet } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
name: 'App',
components: {
IonApp,
IonRouterOutlet
}
});
</script>
Home.vue
<template>
<ion-page>
<ion-header :translucent="true">
<ion-toolbar>
<ion-title>Blank</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<a-scene arscene embedded arjsc>
<a-marker preset="hiro">
<a-box position='0 0.5 0' material='color: black;'></a-box>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
name: 'Home',
components: {
IonContent,
IonHeader,
IonPage,
IonTitle,
IonToolbar
}
});
</script>
<style>
</style>
没关系,我决定采取不同的方法。
我通过位于资产文件夹中的静态 html 文件加载 ar.js。
scene.html
<!doctype HTML>
<html>
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>-->
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs vr-mode-ui="enabled: false">
<a-marker preset="hiro">
<a-box position="-1 0.5 0" rotation="0 45 0" color="#4CC3D9"></a-box>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
Home.vue:
<template>
<ion-page>
<ion-header :translucent="true">
<ion-toolbar>
<ion-title>BAAR</ion-title>
</ion-toolbar>
</ion-header>
<ion-content >
<iframe src="/assets/scene.html" style="position:absolute; width: 100%; height: 100%;"></iframe>
</ion-content>
</ion-page>
</template>
[...]
来源:
Medium
我目前正在使用 Vue 结合 Ionic 进行 AR 项目。为此,我目前使用的是 Ar.js 的 A-Frame。在我的物理设备上 (iPhone) 我已经获得了视频输出,但视频输出只有设备宽度的 1/3。其余为空白。 如何让视频输出超过整个设备宽度?
main.ts
import "aframe";
import 'ar.js';
const app = createApp(App)
.use(IonicVue)
.use(router);
router.isReady().then(() => {
app.mount('#app');
});
App.vue
<template>
<ion-app>
<ion-router-outlet />
</ion-app>
</template>
<script lang="ts">
import { IonApp, IonRouterOutlet } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
name: 'App',
components: {
IonApp,
IonRouterOutlet
}
});
</script>
Home.vue
<template>
<ion-page>
<ion-header :translucent="true">
<ion-toolbar>
<ion-title>Blank</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<a-scene arscene embedded arjsc>
<a-marker preset="hiro">
<a-box position='0 0.5 0' material='color: black;'></a-box>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
name: 'Home',
components: {
IonContent,
IonHeader,
IonPage,
IonTitle,
IonToolbar
}
});
</script>
<style>
</style>
没关系,我决定采取不同的方法。 我通过位于资产文件夹中的静态 html 文件加载 ar.js。
scene.html
<!doctype HTML>
<html>
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>-->
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs vr-mode-ui="enabled: false">
<a-marker preset="hiro">
<a-box position="-1 0.5 0" rotation="0 45 0" color="#4CC3D9"></a-box>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
Home.vue:
<template>
<ion-page>
<ion-header :translucent="true">
<ion-toolbar>
<ion-title>BAAR</ion-title>
</ion-toolbar>
</ion-header>
<ion-content >
<iframe src="/assets/scene.html" style="position:absolute; width: 100%; height: 100%;"></iframe>
</ion-content>
</ion-page>
</template>
[...]
来源: Medium