❤
npm
Sign UpSign In

cordova-plugin-arjs

0.0.1 • Public • Published

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.

  1. Wrap your scene in a <script> tag
  2. Add a <div class="cordova-aframe-root" ...> tag (special CSS applies)
  3. 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

Readme

Keywords

Package Sidebar

Install

npm i cordova-plugin-arjs

Repository

github.com/benallfree/cordova-plugin-arjs

Homepage

github.com/benallfree/cordova-plugin-arjs#readme

Weekly Downloads

1

Version

0.0.1

License

MIT

Unpacked Size

5.15 MB

Total Files

11

Last publish

Collaborators

  • benallfree
Try on RunKit
Report malware