Search code examples
vue.jsionic-frameworkaugmented-realityaframe

Wrong width of a-scene. a-frame with ar.js using Vue with ionic

I am currently working on an AR project with Vue in combination with Ionic. For this I have so far used A-Frame with 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. The rest is blank. How do I get the video output to be over the whole device width?

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>

example

Solution

  • Nevermind, I decided to take a different approach. I load ar.js via a static html file which is located in the assets folder.

    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>
[...]

    Source: Medium