Docy Child

True Scale AR 3D Models

Estimated reading: 7 minutes

Augmented Reality for previewing products is becoming more common within eCommerce.

a visualization of a person holding their mobile device and previewing an augemented reality couch that is sized to its real world scale.

In this guide, we will walk through how to set up a 3D model to appear in true scale within an AR experience. I will also show how to use Blender to scale the model, and then how to create a web-based 3D preview that launches the true-scale AR experience.

This guide will assume a basic understanding of 3D concepts such as scale, rotation, and importing/exporting. Though no knowledge is needed to follow along. For this guide, we’ll use Blender for the 3D modeling, though the approach is similar across 3D tools. 

Project Setup

To start, open Blender and load the default project. The first thing you’ll notice in the scene is the default cube, a camera, and a light. For setting up true-scale we only need the cube so remove the camera and light. The cube will act as our bounding box to ensure our 3D model stays within the required dimensions.

Before we start, let’s check the scene settings to ensure we are using the proper units. For this example, I’m using the default Metric unit system, and from this interface, we can see that the base unit will be meters. Take note of this base unit because later when we prep the model for AR, we will make sure we are using the same base units.

Now that our base units are set, select the cube and you’ll notice it’s scaled 1 x 1 x 1 but what does that equate to in meters? To accurately measure the cube, switch the ViewPort to Front and zoom in so the cube fills most of the screen.

Next, select the measurement tool and use the grid to drag a measurement line from the left edge of the cube to the right edge.

Using the Measure tool we can see that the cube is 2m on each side, but to keep the calculations simple we’ll need a bounding box that is 1m on each side.

Next, we’ll modify the cube to make it 1m on each side. Switch to the Modeling tab, which puts us into edit mode, and type s to enable scaling then type 0.5 and hit enter to reduce the model scale by 50% of the original across all axes.

Blender Modeling View Edit Mode Scaling

With the cube scaled down, switch back to the Layout tab and use the measure tool to confirm the cube is now 1m on each side. Now that the cube is 1m on all sides we can use it as a bounding box to accurately set the scale of our 3D model to match its physical counterpart.

The only drawback to the default cube it’s fully opaque, but to see what we are doing we’ll need the cube to have some transparency. There are a few options, one is to use Wireframe mode and another is to texture the cube.

While wireframes are faster to use and don’t require any extra setup, they aren’t the easiest to visualize when the product is protruding from the bounding box. For this reason, I prefer to add a texture with transparency to the cube. 

Use the link below to download a true scale cube with transparent materials that you can import into your project. 

Once you have the semi-transparent cube setup, you are ready to set the bounding box scale.

Establishing Real World Scale

In this example, we’ll create a true scale 3D pillow. To better understand the size that the pillow should be, I will use this sizing chart that gives the pillow’s dimensions in centimeters.

For this example, I will use the standard size pillow.

Chart defining the measurements for the pillow

Now that we have established the dimensions we want for our model, we can scale the cube to these dimensions.

Set The Bounds

Switch back to the Layout tab and select the Cube and within the Object properties in the right panel, set the Scale-x to 0.6 for 60cm width, Scale-y to 0.35 for 35cm depth, and Scale-z to 0.11 for 11cm height.

Set the scale of the bounding box to the product dimensions

Import 3D Product Model

Now that we have established our bounding box, we can import the 3D model for our product. For this example, I will be using a 3D model of a pillow but feel free to use any 3D model.

Once you’ve imported the 3D model and may notice that the scale and rotation are not correct. In my instance, the pillow is quite large and rotated perpendicular to the bounding box.

To ensure we don’t distort the original product model we will need to add a parent node to the product mesh. Using a parent node for scaling and rotation ensures that the base model keeps its original properties.

In Blender, click Add > Empty > Plain Axis to add an empty node at the scene’s root. Make sure to name the root model for easier reference. Then using the scene graph, in the right panel, drag the mesh node over the root node and hold down the shift key to establish the parent/child relationship.

Set Product Scale

Now that we have established our bounding box, select the parent node then use the Scale and Rotate tools to fit within the bounding box. Make sure the model is scaled up to the edge of the bounding box but doesn’t break through any of the faces. For greater precision, set the scale and rotation values manually using the Object Properties tab within the right side panel.

In my example, I rotated the parent 90° around the Z-axis, and scaled the parent to 0.319 on all axes.

Our 3D product is now correctly scaled and ready for export. Before we export, make sure to hide the bounding box. From the Export options select the glTF 2.0 (.glb/.gltf) format.

Within the export options, expand the Include options and select “Visible Objects” to ensure the 3D product is exported without the bounding box.

Web viewer with AR preview

The final step to visualizing our 3D product is to embed it within a 3D web preview that supports augmented reality using the VTO Studio.

Log into your account on the platform and create a new project using the VTO project type. Create new project configuration window

Once the project loads, select the Model from the left side panel.

Then using the 📁 next to the “GLB/GTLF” input, in the right side panel, upload the GLB model. Once you select your model, the Asset Manager will automatically generate the USDZ file for AR on iOS devices. Media Manager, file upload window.

After you have uploaded and selected your files, you may want to adjust some of the UI to fit your brand. Customize the header and call to action button by clicking on the element you want to edit. Enable Control Limits to restrict how far in or out users can zoom to avoid poor user experience caused when users zoom too far in or out.

Once you are happy with the design, click Save and Publish. A green check mark will appear when the project has been successfully published. Click View Live Project to preview your true-scale product experience.

Preview the true scale pillow VTO project

From desktop, it’s easy to switch over to mobile. Click the Experience in AR button to display the page’s QR code.

Next, open your mobile phone’s camera app and scan the QR code. Tap the link in the camera view to load the 3D preview webpage.

Screenshot of mobile camera scanning QR code on desktop

Once the webpage loads, tap the Open in AR button to preview the true-scale product using augmented reality.

True Scale Pillow visible on a desk in augmented reality
Share this Doc