cordova-plugin-arjs
v0.0.1
Published
AR.js for Cordova
Downloads
3
Maintainers
benallfreeReadme
cordova-plugin-aframe
This plugin adds A-Frame support to your Cordova application!
Installation
cordova plugin add cordova-plugin-aframe
cordova prepareUsage
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
devicereadyevent
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