Cordova-plugin-arjs NPM

cordova-plugin-aframe

This plugin adds A-Frame support to your Cordova application!

Hello WebVR

Installation

cordova plugin add cordova-plugin-aframe
cordova prepare

Usage

A sample A-Frame demo looks like this:

<a-scene renderer="antialias: true" background="color: #FAFAFA">
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
  <a-sphere
    position="0 1.25 -5"
    radius="1.25"
    color="#EF2D5E"
    shadow
  ></a-sphere>
  <a-cylinder
    position="1 0.75 -3"
    radius="0.5"
    height="1.5"
    color="#FFC65D"
    shadow
  ></a-cylinder>
  <a-plane
    position="0 0 -4"
    rotation="-90 0 0"
    width="4"
    height="4"
    color="#7BC8A4"
    shadow
  ></a-plane>
</a-scene>

To get that working in Cordova, there are a few important steps.

Wrap your scene in a <script> tag
Add a <div class="cordova-aframe-root" ...> tag (special CSS applies)
Inject your scene in Cordova's deviceready event

Example:

  <head>
    <script id="aframe_scene" type="text/html">
        ...your scene, like above
    </script>
    <script type="text/javascript">
        document.addEventListener('deviceready', function() {
            var aframe_scene = document.getElementById('aframe_scene').innerHTML
            document.getElementById('aframe_root').innerHTML = aframe_scene
        })
    </script>
  </head>
  <body >
    <div class="cordova-aframe-root" id="aframe_root"></div>
    <script type="text/javascript" src="cordova.js"></script>
  </body>
</html>

Step 1: Wrap the scene in a tag

Discussion

Although A-Frame is a pure JS library, there are some additional steps needed to ensure compatibility with a Cordova app. Notably:

Support for XHR requests to file:// endpoints
CSS overrides

Because of these factors, I thought it better to provide a first-class Cordova plugin that took care of all the details.

Thanks

Special thanks to A-Frame author and maintainer Diego Marcos for helping to work through all the changes needed and allowing a few modifications into the A-Frame core

ecosystem:cordova arjs vr webvr

@infinitebrahmanuniverse/nolb-cordova-plugin-a @everything-registry/sub-chunk-1382 @zalastax/nolb-cordova-plugin-a

0.0.1

5 years ago