Shopping in VR – Using Objects and lights in WebVR

Shopping in VR

In this tutorial, we’ll see how to use objects and lights in WebVR to create a shopping experience in VR. We’re using objects from tf3dm.com and PointLight, AmbientLight and SpotLight to light our models. The item name and price will be displayed along with the object using TextGeometry.

This is part of #DaysInVR series. View All VR Projects. Yesterday we learnt how to use SpotLight and PositionalAudio in WebVR to create a nightclub effect.

Adding objects in WebVR

For the purposes of the demo, we’ll show three women’s wear items that users can checkout to buy. We’re using OBJLoader and MTLLoader to load our object. We’ll then place the 3 objects around our camera. Our camera is placed at the center.

Since there is no light added to the Scene yet, the objects won’t be visible. We’ll now add lights to the Scene.

To rotate the object, we need to add the following in our animate() function. This will keep the item spinning in the y axis.

Adding lights in WebVR

We’re going to add three different lights to create a unique ambience.

1. Ambient light
2. Point light
3. Spot light

Ambient light is used to light all the objects evenly. Point light acts like a light bulb and spreads light in all directions from a point. Spot light spreads light in given direction. We can specify the object as the direction target for the SpotLight and it’ll shine in that direction.

Once the objects are present, we’ll add our text next to the objects. In this demo, we’re adding the title of the item and the price next to the object.

Adding text in WebVR

To add text, we’ll use TextGeometry. Once we create our text mesh, we’ll position it next to the object.

Once you have added all the elements, you should be able to see the items and pricing next to it.

Its your turn

Add more objects and create even more extensive collection of items for shopping. Don’t forget to share your creation in the comments below.