PROJECTS
AR
AR
over to http://www.8thwall.com/sign-up and sign up for an
account. Once you are registered and logged in, you
will need to select the ‘Start a new project’ option
from the Dashboard. Pick a name for the project and
then head to the Settings area to get your app key.
You will be needing this when it comes to the source
code.ADD THE LIBRARIES
Inside your code editor, you will need to include
A-Frame, 8th Wall and your API key inside the
<head> tag.<script src=”//cdn.8thwall.com/web/aframe/8frame-
0.9.0.min.js”></script>
<script src=”//cdn.8thwall.com/web/xrextras/xrextras.
js”></script>
<script src=”//apps.8thwall.com/CREATE AN INTERACTIVE
AR ECOMMERCE SITE
Darryl Bartlett shows you how to build a simple AR scene for ecommerce
using 8th Wall and A-Frame
Augmented Reality is just one of many
technologies that will change the way we
interact. It’s still relatively new but even now there
are several tools we can use to begin planning the
next generation of interactivity for our users.
In this tutorial we will be looking at AR from
an ecommerce perspective. Users will be able to
hover over an image marker and our web app will
display a 3D representation of an object. In this
case, the object will be a VR headset called the HTC
VIVE. The user will be able to interact with the
object by rotating and a text description will appear
underneath the object. A sound will play during
interaction and a Buy Now button will also come
into view when the image marker is found and the
model is displayed.
We will be using 8th Wall and A-Frame for this
project, so the first thing you will need to do is headView source
files here!
All the files you need for
this tutorial can be found at
https://github.com/darryl-
bartlett/AReCommerceTestABOUT THE AUTHOR
DARRYL
BARTLETT
t: @darrylabartlett
job: CTO at Droplet
areas of expertise:
JavaScript, PHP & Mobile