Embeddable Content

Estimated reading: 4 minutes

Summary: In this guide, we’ll use the WebXR.tools 360 Studio to embed interactive content within a 3D rendered virtual space.

WebXR.tools 360 Virtual Space editor 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 360 Studio to embed interactive content within a 3D rendered virtual space.

Prerequisites

WebXR.tools Account

Project Setup

In the WebXR.tools dashboard, click the Create New Project button, fill in the Project Name and select the 360 Project Type.

When the 360 editor 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 various interactive hotspots that we can add into the scene.

Embed Contet

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.

Image

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.

Video

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.

iFrame

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 the View Live Project button 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.