Importing XRExtras into Cloud Editor
This section of the documentation is intended for advanced users who are using the 8th Wall Cloud Editor and need to create a completely customized version of XRExtras. This process involves:
- Cloning the XRExtras code from GitHub
- Importing files into your Cloud Editor project
- Going through all of the .js files and adjusting the exports
- Updating your code to use your local, custom copy of XRExtras instead of pulling our default from CDN (via meta tag)
If you only need to make basic customizations of the XRExtras loading screen, please refer to this section instead.
Note: By importing a copy of XRExtras into your Cloud Editor project, you will no longer receive the latest XRExtras updates and functionality available in from CDN. Make sure to always pull the latest version of XRExtras code from GitHub as you start new projects.
Instructions:
Create a
myxrextras
folder within your Cloud Editor projectAdd contents of the
xrextras/src/
directory (https://github.com/8thwall/web/tree/master/xrextras/src) to your project, with the exception of index.jsYour project contents will look something like this:
- In head.html, remove or comment out the
<meta>
tag for @8thwall.xrextras so it’s no longer pulled in from our CDN:
- In app.js, import your local xrextras library:
- Go through all of the *.js files underneath myxrextras/ and replace all of the
module.exports
withexport
:
Examples:
myxrextras/aframe/aframe.js:
myxrextras/aframe/aframe.js:
Changing/Adding image assets
First, drag & drop new images into assets/ to upload them to your project:
In html files with src
params, refer to the image asset using a relative path:
<img src="../../assets/my-logo.png" id="loadImage" class="spin" />
In javascript files, use a relative path and require()
to reference assets:
img.src = require('../../assets/my-logo.png')