VTO Studio Quickstart

Estimated reading: 5 minutes

Summary: Learn how to create custom 3D experiences for exploring and visualizing in browser or using augmented reality that work across all mobile web browsers, without writing any code.

WebXR.tools VTO Studio extends reality by allowing you to create custom 3D experiences that allow your audience to not only visualize 3D models but also explore them in browser or using augmented reality. Don’t worry about the end user’s device, because VTO experiences work across desktop and mobile web browsers,

In this guide, we’ll walk through how to build a basic 3D preview in 5 steps.

Prerequisites

3D assets in glTF or glb formats (3D models, 3D file converter)
WebXR.tools Account

Create New Project

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

When the studio tool 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 scene settings.

Customize the loader

The loader scene appears while the assets for the virtual preview are loaded. Select the loader scene, and the settings will appear in the right panel. The loader image can be a jpg, png, or svg file. Use the 📁 icon to upload your image.

Next, customize the background color by clicking the 🔵 in the right panel.

Once you’ve chosen a background color, set the intro animation effect and adjust the size of your loader image asset.

Upload the 3D model

Now that we have our loader scene set up, select the Model scene in the left panel to display the model preview in the center panel and the settings in the right side panel.

There are two inputs for 3D model files, the first for GLTF/GLB and a second for USDZ/Reality. The GLTF/GLB model is used for the web browser preview and the augmented reality preview on Android devices. The USDZ and Reality files are used for the augmented reality experience on iOS devices. To upload a new 3D model update the first input, using the 📁 icon to upload/select your glb model.

For this guide we are using a 3D model from Sketchfab. I download the gltf format and upload the zip directly into the asset manager. The WebXR.tools asset manager will automatically convert this into a glb file.

Once you upload the glTF/glb model, the webXR.tools asset manager will automatically generate the USDZ file. The asset inputs will be disabled while the USDZ asset is generated.

Note to customize the USDZ file or upload a .reality file, click the 📁 icon for the USDZ/Reality input and use the asset manager to upload your file.

Next, customize the background color by clicking the 🔵 in the right panel.

Customize the UI

Within the Model scene there are 3 UI elements besides the model: the title bar across the top of the screen, the call to action button in the lower left, and the AR button in the lower right corner. To customize any of these elements click the element and the settings panel will appear.

The UI element settings can also be customized using the project settings. Click the ️next to the project name in the upper left hand corner, to display the Project Settings panel.

The project settings allow you to update the Basic project info, configure audio that will play across all scenes, customize the exit prompt, add custom hotspot icons, or add custom CSS.

Project Info allows you to update the project name, description, and thumbnail image which appear in the dashboard. This information also appears when you share a link to the experience. You can also set a custom Google Analytics ID to send events data directly to your Google Analytics dashboard.

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.