{"id":6194,"date":"2024-07-17T16:37:12","date_gmt":"2024-07-17T20:37:12","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=6194"},"modified":"2025-05-12T17:09:42","modified_gmt":"2025-05-12T21:09:42","slug":"cross-platform-ar-vr-with-the-web-webxr-with-a-frame-angular-and-capacitor","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/cross-platform-ar-vr-with-the-web-webxr-with-a-frame-angular-and-capacitor","title":{"rendered":"Cross-platform AR\/VR With the Web: WebXR with A-Frame, Angular, and Capacitor (Part I)"},"content":{"rendered":"\n

This blog post is part of the second episode of the Out-Of-The-Box With Capacitor series on our YouTube channel and the second AR tutorial on the blog. You can find the previous video here<\/a> and blog post here<\/a><\/em><\/p>\n\n\n\n

For the longest time, creating immersive, adaptive, and interactive experiences was a time-consuming process. Developing these types of experiences usually meant using specific tools, testing on expensive hardware, and you were usually locked into an ecosystem unless you worked for a company with the means to create multiple versions of your immersive experience. However, with the advent of WebXR it\u2019s becoming easier for developers to create AR\/VR experiences in their applications and with the help of a tool like Capacitor it can run on many different platforms with a single codebase.<\/p>\n\n\n\n

In this tutorial I\u2019m going to show you how to use A-Frame<\/a>, Angular<\/a>, and Capacitor<\/a> to create a cross-platform immersive experience that runs on iOS, Android, and devices like the Apple Vision Pro using the web with a single codebase. More importantly, If the device you plan to put this on supports WebXR then this tutorial will also work with your device!<\/p>\n\n\n\n

Tutorial<\/h2>\n\n\n\n
    \n
  1. Create an Ionic-Angular Project<\/li>\n<\/ol>\n\n\n\n
    ionic start webXR blank --type=angular<\/code><\/pre>\n\n\n\n
      \n
    1. Install A-Frame into your project<\/li>\n<\/ol>\n\n\n\n
      npm install --save aframe<\/code><\/pre>\n\n\n\n
        \n
      1. Import A-Frame in polyfills.ts <\/em>under Browser Polyfills<\/li>\n<\/ol>\n\n\n\n
        * BROWSER POLYFILLS\n\u00a0*\/\nimport 'aframe';\n\/**<\/code><\/pre>\n\n\n\n
          \n
        1. In your component, import CUSTOM_ELEMENTS_SCHEMA<\/em> from @angular\/core <\/em>and add it to the schemas section<\/li>\n<\/ol>\n\n\n\n
          import { Component, OnInit, CUSTOM_ELEMENTS_SCHEMA } from '@angular\/core';\nimport { CommonModule, Location } from '@angular\/common';\nimport { FormsModule } from '@angular\/forms';\nimport { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic\/angular\/standalone';\n\n@Component({\n\u00a0\u00a0selector: 'app-webxr',\n\u00a0\u00a0templateUrl: '.\/webxr.page.html',\n\u00a0\u00a0styleUrls: ['.\/webxr.page.scss'],\n\u00a0\u00a0standalone: true,\n\u00a0\u00a0imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule],\n\u00a0\u00a0schemas: [CUSTOM_ELEMENTS_SCHEMA]\n})<\/code><\/pre>\n\n\n\n
            \n
          1. Add A-Frame HTML<\/li>\n<\/ol>\n\n\n\n
            <a-scene>\n\u00a0\u00a0\u00a0\u00a0<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"><\/a-box>\n\u00a0\u00a0\u00a0\u00a0<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"><\/a-sphere>\n\u00a0\u00a0\u00a0\u00a0<a-cylinder\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0position="1 0.75 -3"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0radius="0.5"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height="1.5"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color="#FFC65D"\n\u00a0\u00a0\u00a0\u00a0><\/a-cylinder>\n\u00a0\u00a0\u00a0\u00a0<a-plane\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0position="0 0 -4"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0rotation="-90 0 0"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0width="4"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0height="4"\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color="#7BC8A4"\n\u00a0\u00a0\u00a0\u00a0><\/a-plane>\n\u00a0\u00a0\u00a0\u00a0<a-sky color="#ECECEC"><\/a-sky>\n\u00a0\u00a0<\/a-scene>\n\u00a0\u00a0<ion-button fill="outline" style="position:absolute; top:40px; left:10px;" (click)="back()">Back<\/ion-button><\/code><\/pre>\n\n\n\n
              \n
            1. Add, build, sync, and run on your platform of choice<\/li>\n<\/ol>\n\n\n\n
              ionic capacitor add ios\nionic capacitor add android\n\nionic capacitor build\nionic capacitor sync\n\n\/\/Works best if you run it on a physical device\nionic capacitor run ios\nionic capacitor run android<\/code><\/pre>\n\n\n\n
               Optional: Running Project on VR Headsets<\/h2>\n\n\n\n
                \n
              1. To run on headsets like the Vision Pro\/Meta Quest\/etc. you can serve the application locally or deploy<\/a> it to a server with certs enabled<\/li>\n<\/ol>\n\n\n\n
                \/\/Run locally\nionic serve<\/code><\/pre>\n\n\n\n
                  \n
                1. [Optional] If using the Vision Pro, enable WebXR by going to Settings->Apps->Safari->Advanced->Feature Flags <\/em>and enabling WebXR Device API<\/em>. (This should be enabled by default in VisionOS 2.0)