PROJECTS
AR
HELP WITH DEVELOPING
WEB AR
RESOURCESHere are some useful resources to assist you with building
amazing web AR applications.8th Wall Docs
http://www.8thwall.com/docs
The number-one place to help you learn more about building AR
apps with 8th Wall.A-Frame
https://aframe.io/docs/1.0.0/introduction
A-Frame can be used for both AR and VR applications. Read
through the official documentation to expand your knowledge
even further.Poly by Google
https://poly.google.com
If you are unable to create your own assets, then check out Poly
by Google to find 3D models for your projects. In most cases
you will need to convert the file to a GLB file, which you can find
information about inside the 8th Wall documentation.8 Web AR Examples Where Brands Offered a Memorable
Immersive Experience
http://www.wowso.me/blog/webar-examples
Check out these examples that show off how web AR can be both
immersive and successful.WebAR: the Augmented Reality for your Browser
http://www.youtube.com/watch?v=IZMpfQ4znK8
Enjoy this interesting talk from last year’s International JavaScript
Conference where Anastasiia Miroshnichenko walks us through
contemporary web augmented reality.cursor=”fuse: false; rayOrigin: mouse;”>
</a-camera>
<a-light type=”directional” intensity=”4” position=”1 1
1”></a-light>
<a-light type=”ambient” intensity=”3”></a-light>ENTITIES
The xrextras-named-image-target name will need
to match the name of the image target that you
upload to the 8th Wall Console in a later step.
In this example, the target is called vr-headset.
jpg; however you don’t need to add the extension
name (.jpg). You can find the image in the targets
folder. The model, text and sound are also placed
here. These will automatically be pulled in once
a target has been found. You will notice that the
model should also have a xrextras-one-finger-rotate
component attached. This is so the user can rotate
the model and get a better look at the product. Make
sure that you also add the product-events component
to the model entity; this is so we can include some
extra functionality when the image target is found
or lost.<a-entity xrextras-named-image-target=”name: vr-
headset”>
<a-entity product-events xrextras-one-finger-rotate gltf-
model=”#vr-headset-model”></a-entity>
<a-entity text=”align: center; value: HTC Vive VR Headset;
width:1.5;” position=”0 -1 -1” ></a-entity>
<a-entity sound=”src: #descsound”></a-entity>
</a-entity>SET UP A BUTTON
We need to set up a button on the page so the user
can buy the product. This doesn’t have to be part of
the scene but works well as an overlay. To keep the
scene clean, this can be placed in the top corner but
will only appear when the user successfully hovers
over the image. For now, we’ll put in a default link
but this can always change depending on the object
and items available for sale. Remember that you will
need to grab the styles for linkbox and itemlink, which
can be found in the final source code.<div id=”linkbox”>
<a href = “https://www.vive.com/uk/product/”
id=”itemlink”></a>
</div>BUILD OUT THE COMPONENT
Now to write out the code for the product-events
component that we added to the model entity in the
last step. The first thing we need to do is add a click
listener so our sound will play when the VIVE model