VR

VIRTUAL REALITY or REALITY EMULATION describes the computer-generated environment in three-dimensional view that are interactive with the users

WHY VR IN ECOMMERCE

So far, VR has been bumped only into the world of games but as the retailers look forward in giving their customers a hypnotic experience, VR takes the next step in transforming the digital world.
VR will transform the circumstances of how we shop online .it enables the shoppers to open the website and explore themselves into it. Imagine having no text, no click in the webpage, you can select the department or product by just gazing at the list or by asking what you want through your speech !!!,,

SO YES, HERE’S WHAT WE ARE BUILDING

Ultimately, shoppers pop onto the website for viewing the products. Bringing in the concept of virtuality at the product description page (PDP) is the key for possession.
Taking this as an instance, I will show you on how this can be implemented using a-frame.js
.

I’ll outline the steps I took to get here,

Initially, let’s take up the products and make it rotate in all direction so that the customers can have a view of the product in all dimensions. this can be achieved in various formats like gif, videos or a series of images

Now, let’s take on all the attributes of the product like size chart, offers, promotions, etc as small images called HOVER IMAGES fixed up. Each hover image is linked with a larger image consisting of the complete information about the entity. This larger image is called as the INFORMATION IMAGES and it pops on when the customer holds the view over the Hover image

Speech recognition can also be used instead of the virtual cursor. Here the speech is converted into text and then mapped to the respective functions

What’s A-FRAME .JS?

A-FRAME.JS a web framework for building VR experiences. This is an easy and powerful way to develop VR. A-frame can be developed from the plain HTML by just adding “a-frame” in the head tag and creating that as an “.html” file and open it through the browser without installing any additional apps. A-frame has many core components like geometries materials, lights, animations, models, ray casters, positional, audios, videos, test, control, etc. Its main aim is to define a fully dynamic interactive VR experiences making full use of the positioning and controllers.

What do you require?

Images for your product in all directions, the hover, the logo, 360-degree background and the information pops.

STEPS:

TAGS

Head

The line is the head tag, it’s the container to hold all the title elements, scripts, styles. Etc …According to our need we can add on the components of the a-frame in the head tag.

Body

Scene

a-scene is the component which is inherited from the entity class thus enabling us to attach all its child components like a-assets and a-entity. a-scene greatly helps us in handling the webVR and Three-js

Assets

A-frame enables us to add assets (i.e., images, videos, sound files ,3D models and materials) .and manage them in one place, where we preload it and add cache of the assets for having a better efficiency. These assets can be assigned a name as ID. The assets that are to be loaded for the entire sessions like the initialization images, product images and the hover images are added on in the asset.

Background

The background of our product display page must enable us to give in the virtual effects. For attaining this we can use the tag. We can feed in the source for any 360 images or have a plain background by just using the sky tag and add a colour required.
For a simple 360-degree white background,

<a-sky src="">
</a-sky>

Entity

a-entity component provides extra events and it handles the hand animations and poses. It defaults the geometry primitive property to the box and maps the HTML width attribute and colour attribute along with few more components like material, position, scale, visible, etc.

Material — appearance of the entity such as colour, texture or capacity, etc.

Position — responsible in placing the entities in the 3D environment with respect to the coordinate (X, Y & Z).

Scale — responsible in the entity’s shrinking or stretching with respect to the coordinate (X, Y, Z)

Visible– a Boolean type and the default values true. where,
True: The entity will be visible;False: The entity will not be visible but will still exist in the scene

Images

a-image tag helps the images to be positioned flat on to the background. To custom the images we can add the attributes like colour, material, position, scaling, etc. The hover images, the product’s images and the information images are displayed using this tag

Event handler

Event handlers can be attached to the specified elements, so that the element performs its action only when its pertained event happens. there are lots of event handlers available, here we are using only the Mouse Enter and Mouse Leave.

Mouse enter event – when the pointer ( here its virtual cursor) is moved over the element (hover image) where the listener is attached is mapped to a function where the popping image (information image) is attached

Mouse leave event – when the pointer ( here its virtual cursor) is moved away the element (hover image) where the listener is attached no event happens

Show/hide

When the event is hold , the information image must pop in ,this is handled with care in this function. Only one information image must be popped at any instance . For this, each time an event is hold at the hover image, all the information image’s visibility is set FALSE while only the respective hover image’s information image is set TRUE.

function showHideImages(imageId,visibility){
//console.log("Working on "+imageId);
//console.log(allInfoImages.length-1);
if(visibility==true){
for(i=0;i<=allInfoImages.length-1;i++){ // HIDE ALL THE IMAGES AND SHOW ONLY THE CURRENT
allInfoImages[i].setAttribute("visible",false);
}

Product

Virtual reality over the product is the key requirement . Customers can just turn the image’s focus in any direction with the virtual cursor so as to enable a better shopping experience by knowing more on the product’s look .
For this instance, let’s use the animation component. If the virtual cursor is over the dimension of the product then the picture must rotate and when the mouse is away from the product the animation must be paused.

Animation start

Lets take up a series of images of the product in all different directions, say about 15 images . Now when the cursor is on the dimension of the product image , the series of the images are displayed – which makes the product to appear in a rotating manner . When the cursor is moved away , the rotation is paused and it resumes when the cursor is bought back .The series of images are displayed in an order from 1 to 15 , when it reaches the 15th image it starts again from 1st . Its like a cyclic process .Each image in the series are displayed with the time interval in 100 MS .

Each time an event is hold and the process is done, the recognition must again re-start immediately. So that no input from the customer is missed. Sometimes the wrong input can also be given by the user, so we must prompt the user to move forward in the right direction by handling all the errors.