AR
Top You can use anything
as an image marker with
8th Wall. This HTC VIVE
image is the visual cue that
is used to trigger our object
and events
Above Uploading an
image target is simple and
a number of formats are
accepted but remember to
make sure your target is
loaded in automaticallyis tapped on. We have to use a physical interaction
because of a browser limitation on iOS.
AFRAME.registerComponent(‘product-events’,{
init: function(){
this.el.addEventListener(‘click’,function() {
var soundclip = document.querySelector(‘[sound]’);
soundclip.components.sound.playSound();
});
}
});
Next, we need to add a listener inside the product-
events component so we know an image has been
successfully found. 8th Wall already has a listener
function in place called xrimagefound, which is called
whenever an image target has been found. This will
make our buy-it-now button visible and change the
text on it to ‘Buy HTC VIVE’ but only if the name of
the target matches ‘vr-headset’.
this.el.sceneEl.addEventListener(‘xrimagefound’,
function({detail}) {
if (detail.name === “vr-headset”) {
document.getElementById(“linkbox”).style.visibility =
“visible”;
document.getElementById(“itemlink”).innerHTML = “Buy
HTC Vive”;
}
else {
document.getElementById(“linkbox”).style.visibility =
“hidden”;
}
});
There is one last problem to solve. Currently the buy
now button will stay on screen even when the user
moves the camera away from the image marker. If
the user has finished looking at the product, they
wouldn’t want the buy now button to still be on the
screen. We need to add the following code to the
product-events component to hide the button once the
model is no longer on screen.
this.el.sceneEl.addEventListener(‘xrimagelost’, function() {
document.getElementById(“linkbox”).style.visibility =
“hidden”;
});
MANAGE TARGETS
Head back to the 8th Wall Dashboard
(console.8thwall.com) and click Manage Targets.
Upload the image target provided in the source code
called vr-headset.jpg. Make sure you tick the Load
Automatically box.
CONNECT DOMAIN
Before viewing your project, connect a domain to
specify the location of your files. On the free plan,
you will also need to authorise your device to view
the project, which you can do from the Dashboard
by scanning the QR code or clicking Authorize This
Browser from your mobile.TRY IT OUT
Print out the target and place it on the wall, or load
it up on your computer. Head to the URL inside
your mobile browser (Safari or Chrome) and move
your device towards the marker. When you hover
over the marker, the VIVE model should appear
along with the text and buy now button. The sound
should play once the VIVE has been interacted with.CONCLUSION
Hopefully this tutorial has given you ideas for how
to use AR in your projects. It might be a while
before it hits its peak but I believe it’s going to be a
game changer for web and native app developers.
Remember to download the full project at https://
github.com/darryl-bartlett/AReCommerceTest.