How to create a VR/360º experience using Voxelscope
Creating Virtual Reality and 360º content shouldn’t be so hard or expensive. That’s why we built Voxelscope!
With Voxelscope Drag and Drop platform, everyone can easily take their business marketing to the next level by creating VR showrooms, virtual stores, training modules, interactive videos and much more. After creating the experience, you can embed it in your website or tap into the power of the new 360º VR banners! Take your experience to your customer’s eyes by placing a 360º banner in the world’s leading websites!
In this tutorial we will teach you how to create this experience: Tutorial Experience, using Voxelscope’s drag and drop platform. We will go through all the main features of the creator in easy to follow steps.
- First, sign up for a free account on Voxelscope’s platform
- Name and create a new project
- Create a new scene and give it a name
4. You can upload all your assets (360º videos and photos, 2D image and videos) using the upload button. Let’s upload a 360º photo and a 2D image.
5. Change the background of the scene to the 360º photo.
6. Now that you have your 360º photo on the background, you can overlay it with:
- 2D video
- 2D image
7. Let’s start by overlaying the photo with Text and a 2D image. Drag and drop the Text icon from the centre of the screen. Click on the text to see its options, write “welcome” on the text and change its colour to Yellow. Then drag the 2D image icon from the centre of the screen, select the 2D image uploaded before and position it next to the welcome text. The same actions can be done to insert a 2D video.
8. Time to preview our work, You can click Preview at the bottom right corner and then click Desktop.
9.Two objects left to explore: the Link and the Pinpoint.
10. Let’s create another Scene. Click New scene, give it a name and come back to the first one.
11. In the initial scene, let’s add a Link object. On the menu let’s click the link to scene button and select the second scene we just created. Let’s also change the colour and ICON of the link.
12. Preview your experience as done before and click on the link to see how you navigate to the other scene.
13. The last object we are going to explore is pinpoints. Pinpoints are very useful to mark specific spots of your experience. Let’s add a pinpoint to the first scene. In the menu of this object, you will find many sliders, all of them are to resize the pinpoint, from the ring to the height of the pole.
14. Now that we already have explored all objects we are going to show you how to use the most powerful feature, Action Panels!
15. Action panels can be activated on your experience by clicking on images, links, text or pinpoints. These panels can display images, text, links, HTML and even Add To Cart buttons! You can see an example of a 2D contextual action panel on the image below.
16. Let’s add an Action Panel to the pinpoint. Open the pinpoint menu and click on the orange lightning icon on the top. A new panel will open.
Let’s select the following options:
a- Edit mode select “Standard”
b- Event type select “click”
c- On the panel type select 2D contextual panel.
d- For the image select the same 2D image we inserted before
e- Now add a title and a description
f- We can add an URL title: “Click Here!” and the actual URL for example https://voxelscope.com
g- The last item Click Piggybacking can be used to call an external URL every time this panel is called, for example, the analytics your company is using. We will not set it up this time.
17. Preview the final experience like done before. It should now look like this: Final Experience Congratulations! You are now ready to start creating interactive 360º VR experiences!
This experience can be embedded on your website by going to Share -> iFrame Tag and copying the code directly into your website.
You can also advertise this experience as a 360º banner everywhere on the web by using our Publisher Module!
Now start creating and take your business to the next level with Voxelscope!