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

【问题标题】：Wrong width of a-scene. a-frame with ar.js using Vue with ionic场景宽度错误。带有 ar.js 的 a-frame 使用 Vue 和 ionic
【发布时间】：2021-10-02 12:14:33
【问题描述】：

我目前正在使用 Vue 和 Ionic 进行 AR 项目。为此，到目前为止，我已经将 A-Frame 与 Ar.js 一起使用。在我的物理设备（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>

首页.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>

【问题讨论】：

标签： vue.js ionic-framework augmented-reality aframe

【解决方案1】：

没关系，我决定采用不同的方法。我通过位于 assets 文件夹中的静态 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

【讨论】：