WebXR.tools 360 Immersive Experience Builder allows you to create immersive, branded, discovery-driven virtual experiences containing embedded image, video, and iFrame content that work across desktop and mobile web browsers, without writing any code.
In this guide, we’ll use the WebXR.tools Immersive Experience Builder to embed interactive content within a 360 virtual space.
Prerequisites
Project Setup
Login to the WebXR.tools dashboard, click the Create New Project button, fill in the Project Name and select the Immersive Experience Builder Project Type.
Click Create Project and the new project will be created and setup. Once the project finishes setup the page will auto-load the studio.
When the IXB studio loads, you will notice three distinct sections, The left panel containing the list of scenes, the center panel containing a preview of the current scene, and a right panel with the embedded hotspots that we can add into the scene.
Embed Content
For this guide we will use the default scene to add embedded content that will appear on the walls within the scene. There are three types of Embeddable elements that we can add into a scene, Image and Video media along with iFrame content. Iframe’s allow you to embed other webXR.tools projects or other web-content into our scene.
Let’s start by embedding an image. Click the Image button within the Embeddable elements list and click within the center panel to place the image. Click the 📁 icon to upload/select your image, use the Width & Height inputs to adjust the size of the overlay and the 3D Transform sliders to adjust the angles so the image aligns with the background content.
Next, we’ll embed a video. Click the Video button within the Embeddable elements list and click within the center panel to place the video. Click the 📁 icon to upload/select your video asset, use the Width & Aspect Ratio inputs to adjust the size of the overlay and the 3D Transform sliders to adjust the angles so the image aligns with the background content.
Last, click the iFrame button within the Embeddable elements list and click within the center panel to place the iFrame. Input a url for the website you want to display. Use the Width & Height inputs to adjust the size of the overlay and the 3D Transform sliders to adjust the angles so the image aligns with the background content.
You can repeat each of these actions to embed multiple images, videos, or iFrames into your scene.
Save, Publish & Preview
Now we are ready to publish our experience and preview it. Click the “Save & Publish” button in the upper right corner. A small grey icon will appear while the project is saving, once it has finished saving a green dot will appear.
Click View Live Project to view your 360 virtual experience. When the experience loads in a new tab, click the Start Experience button to begin exploring the virtual space.
Fin
Thanks for taking the time to read my guide and if you have any questions please let me know with a comment.
More Guides
- Multi-Scene 360 Experiences — Learn how to create a
multi-scene360 virtual space and use navigational hotspots to enable users to move through the scenes. - Custom intro screen for 360 Experiences — Learn how to customize the intro/landing screen UI
