Cordova A-Frame Showcase

This Cordova app is a showcase of various A-Frame demos.

Installation

git clone git@github.com:benallfree/cordova-aframe-showcase.git
cd cordova-aframe-showcase
npm i
cordova platform add ios
cordova run ios

Note: Currently, the iOS simulator is VERY slow. It's best to run these on a physical device.

Available Demos

Hello WebVR

Hello Metaverse

360 Panorama

Anime UI

Dynamic Lights

Geometry Gallery

Rolling Your Own

Create a new Cordova app and then follow the steps below.

Install the cordova-plugin-xhr-local-file plugin. This is needed because Cordova runs from file://, and XHR requests to local file:// assets (JSON fonts, 3D models, etc) will fail without this plugin.

cordova plugin add cordova-plugin-xhr-local-file

In your index.html, adjust as follows:

<head>
  <meta
    http-equiv="Content-Security-Policy"
    content="
          default-src 
            'self' 
            data: 
            gap: 
            https://ssl.gstatic.com 
            'unsafe-eval' 
            https://cdn.aframe.io         <-- required
            https://dpdb.webvr.rocks      <-- required
            https://fonts.googleapis.com  <-- required
            https://cdn.jsdelivr.net      <-- your choice, see below
            ; 
          style-src 
            'self' 
            'unsafe-inline'
            ; 
          media-src *; 
          img-src 
            'self' 
            data:                         <-- required
            content:                      <-- required
            blob:                         <-- required
            ;
        "
  />
  ...
  <script src="https://cdn.jsdelivr.net/npm/aframe@1.0.4/dist/aframe-master.min.js"></script>
</head>

That's it! Now you can render an A-Frame scene.