With AR enabled, customers on a phone or tablet get a View in your space button. It opens the product as they configured it in augmented reality, placed in their room through the device's camera.
AR helps most where size and fit matter, such as furniture, lighting and large equipment. It answers the question "will it fit, and how will it look there?"
Which devices get the button
The button only appears where AR can actually open. Desktop visitors never see it.
| Device | Browser | How AR opens |
|---|---|---|
| iPhone, iPad | Safari, Chrome and other iOS browsers | AR Quick Look, Apple's built-in AR viewer |
| Android phones and tablets with ARCore | Chrome | WebXR, inside the browser |
- Android needs the site to be served over HTTPS. On plain HTTP the button doesn't appear.
- On iOS, the button is not shown inside the Google app's built-in browser, which can't open Quick Look.
Turning it on
AR is set per product, and is off by default.
- Open the configurator and go to 3D settings > AR / Quick Look.
- Tick Enable AR (View in your space).
- Set AR scale and, if needed, USDZ max texture size (iOS), as described below.
- Save the configurator.
Screenshot needed: the AR / Quick Look section of 3D settings with AR enabled.
AR scale
- Allow scaling in AR (the default): the customer can pinch to resize the model in Quick Look.
- Fixed scale (furniture): the model stays at its real size. Use this for anything where true size is the point, such as a sofa, a table or a lamp. Letting the customer shrink a sofa to fit their room defeats the purpose.
This setting applies to iOS. On Android, the model is always placed at its real size.
USDZ max texture size (iOS)
On iOS, the device builds a file of the configured product (a .usdz file) when the customer taps the button. This setting caps the size of the textures in that file.
Leave it empty (Auto) to keep textures at full size. If the product takes a long time to open in AR, or fails to open on older iPhones, set a cap such as 2048 or 1024. The file gets smaller and opens faster, with slightly less detail up close.
Model scale matters
AR shows the model at the size it was built. Models should be authored in metres. One unit in your 3D software should equal one metre in the real world.
A model built in centimetres shows up a hundred times too large. A model built at an arbitrary scale shows up as a doll's-house version, or fills the room. Check this before enabling AR. The 3D viewer on the product page can't show the problem, because the camera frames the model whatever its size.
What the customer sees
On iPhone and iPad, tapping the button shows a spinner while the file is built, then Quick Look opens. The customer places the product on a surface, walks around it, and closes Quick Look to return to the configurator.
On Android, the camera opens inside the page. A ring appears on the floor once the phone has found it. Tapping places the product at the ring. Once placed, the product stays where it is. Closing AR returns to the configurator, as it was.
Screenshot needed: the View in your space button in the configurator footer on a phone.
What goes into AR
AR shows the configuration currently on screen: the visible parts, with their current materials and colours, and parts placed on anchors.
Postprocessing effects, the environment and the background are not used in AR, on either platform. The camera image of the room takes their place.
On iOS, the file built for Quick Look also leaves out the scene's lights, the fake shadow, and the objects listed in Hidden objects, including your Custom hidden object names. Quick Look lights the product from the real room.
On Android, the product is shown with the scene's own lights.
Models set to Loading: Lazy are loaded before AR opens, so the first tap can take a little longer on a product with many of them.
Quick Look converts the materials to Apple's format. Standard materials come through well, but custom shaders and effects added with code don't, so a heavily customised product can look plainer on iOS than on the page.
Changing the button text
The label defaults to View in your space. To change it for every product, go to Product Configurator > Settings > 3D viewer and set AR button label. The label is translatable like the configurator's other labels.
Developers can replace the button's icon with the PC.premium3d.ar.svg.icon filter. See 3D Premium hooks.
If something looks wrong
- No button on a phone: check, in this order, that AR is enabled on this product, that the site uses HTTPS (Android), and that the device supports AR. Many older or budget Android phones don't have ARCore.
- The product is far too big or too small: the model isn't built in metres. Rescale it in your 3D software and re-export.
- The customer can resize the product in AR when they shouldn't: set AR scale to Fixed scale (furniture).
- iOS is slow to open AR, or fails: set USDZ max texture size (iOS) to
2048or lower. - A helper object shows up in AR: add its name to Custom hidden object names in 3D settings.
- Tapping the button does nothing: the browser console shows the reason, starting with AR activation failed.