From nothing to an AR app running in the browser in minutes.
You can use any of 8thwall’s supported tracking capabilities:
- SLAM tracking
- Image tracking (flat and cylindrical)
- Face tracking
- VPS (world tracking with pre-scanned mesh for occlusion)
Download the wonderland-ar-tracking
repository, either as ZIP (
<> Code > Download ZIP), or clone it with
Extract the folder and copy the “SLAM-camera” folder from
examples into your
templates folder will be located in the following location, depending on your operating system:
%APPDATA%can be typed in the path bar of Windows Explorer and resolves to
~is your home folder)
If you set up the template correctly, you should see the following when creating a new project in Wonderland Editor:
With the new template selected, you can create a project.
To test the project locally, 8thwall requires you to set up local certificates, since they block serving without HTTPS.
To generate your own SSL certificates for
localhost, you will need to generate them with OpenSSL:
1openssl req -x509 -out localhost.crt \ 2 -keyout localhost.key \ 3 -newkey rsa:4096 -nodes -sha256 \ 4 -subj '/CN=localhost' -extensions EXT -config <( \ 5 printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")
Now, set the key file and certificate file in
Views > Preferences > Server.
Finally, restart the server: Stop the server by clicking on “localhost:8080” at the top of the editor window, clicking “Stop Server”. Then click on “not running”, then “Start Server” to start the server again.
- Ensure you have “USB Debugging” enabled on your device.
- Connect your device via USB.
- Select “Local Device” to trigger the “Allow USB Debugging” dialog on your device.
- Once approved, you can select the device in the dropdown.
- Check the “SSL” checkbox.
- Hit the green arrow to launch the browser with the page on your smartphone.
- Connect your iOS device and Mac to the same Wi-Fi network.
- On your Mac, find your Mac’s name: Go to
System Preferences > Sharingto find your Mac’s name.
- (optional) Install the SSL certificates we generated above on your iOS device: Either email the certificate to yourself and install it via the Mail app, or by using Apple Configurator.
- (optional) Trust the installed certificate on your iOS device by navigating to
Settings > General > About > Certificate Trust Settings.
- Open Safari on your iOS device: Type the URL http://YourMacName.local:8080 or https://YourMacName.local:8081 if using SSL.
To publish your 8thwall-based experience, you will need to replace the 8thwall API Token in
- Create an account at 8thwall.com. On your 8th Wall Dashboard, click “Start a new project”.
- Select “Self-Hosted”.
- Set a project name and a “License Type” that matches your needs.
- Click “Create”.
- Add domains you host on at “Setup Domains”.
- Go to “Settings” (Cog symbol on the left)
- Copy the app key from the “My App Key” section.
Paste the app key in the
src/index.js file: Replace the value of
window.API_TOKEN_XR8 = '<here>';.