场景宽度错误。带有 ar.js 的 a-frame 使用 Vue 和 ionic

Question

I am currently working on an AR project with Vue in combination with Ionic.我目前正在使用 Vue 和 Ionic 进行 AR 项目。 For this I have so far used A-Frame with Ar.js.为此，到目前为止，我已经将 A-Frame 与 Ar.js 一起使用。 On my physical device (iPhone) I already get a video output, but the video output is only 1/3 of the device width.在我的物理设备（iPhone）上，我已经获得了视频输出，但视频输出仅为设备宽度的 1/3。 The rest is blank.其余为空白。 How do I get the video output to be over the whole device width?如何让视频输出超过整个设备宽度？

main.ts main.ts

import "aframe";
import 'ar.js';

const app = createApp(App)
  .use(IonicVue)
  .use(router);
  
router.isReady().then(() => {
  app.mount('#app');
});

App.vue应用程序.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主页.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>

Answer 1

Nevermind, I decided to take a different approach.没关系，我决定采取不同的方法。 I load ar.js via a static html file which is located in the assets folder.我通过位于 assets 文件夹中的静态 html 文件加载 ar.js。

scene.html场景.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:主页.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>
[...]

Source: Medium资料来源：中

场景宽度错误。带有 ar.js 的 a-frame 使用 Vue 和 ionic

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-07-26 18:31:24

场景宽度错误。 带有 ar.js 的 a-frame 使用 Vue 和 ionic

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-07-26 18:31:24

场景宽度错误。带有 ar.js 的 a-frame 使用 Vue 和 ionic

解决方案1
0 已采纳 2021-07-26 18:31:24