The 3D & Augmented Reality component

Discover how to display a 3D object in your app and create custom animations using markers. Offer an augmented reality (AR) experience by projecting it into the user's environment.

Insert a 3D object

First of all, your 3D object must be available in GLB or glTF format.

👉💡 To convert an FXB to GLB, we recommend using clara.io. It is free and also allows you to change some textures to suit other uses.

Compress your 3D object in ZIP format and import your archive into PandaSuite Studio.

Click on Files and import your ZIP file.

To insert your 3D object into your interface, click on Components and insert the 3D / AR component. In the properties, click on Select next to Source. Select your ZIP file.

Specify precisely the name of the 3D file in the archive: this is the path for PandaSuite to find the right file.

Double-click on the component area to bring up the 3D object and manipulate it from the studio. Use the breadcrumb to return to your screen level.

Here are the properties of the 3D/AR component:

Camera controls
Animated transition between markers
Interaction prompt
Enable auto rotation

Add markers to the 3D object

You can create markers on your 3D object, i.e. "mark" one or more positions of your 3D object that will serve as a trigger or object for an action.

To add a marker, go inside the component and click on the + button.

If you have checked the Animated transition between markers property, the transition between these markers will be done automatically even if you do not create an action.

Trigger an action from the 3D object

To trigger an action from your 3D object, select your component and in the Actions tab, add a new action. Here are the available triggers:

Model loaded
Position (marker)
Model error
Start playing
Pause playing
Start of user interaction
End of user interaction
AR error

Associate the action of your choice.

Create an action on the 3D object

Choose an object, a trigger and the Interact with a component action in the Interactivities window.

Select the 3D/AR component and choose one of the following actions:

Change position (marker)
Play
Pause
Start AR

Synchronize with another component

Like any component, you can synchronize your 3D object with any other component (for example the scroll area).

To create a synchronization, insert the Synchronization component from Components.

In the properties, click + Add. Select the 3D/AR component and the other component from the interface or the object list. Select the 3D/AR component and click on Markers in the options.

Launch the AR experience

On an iOS or Android device, you have the ability to offer an augmented reality experience by displaying the 3D object above the camera.

Make sure that your device and your users' devices are compatible with the AR experience. On iOS, it is necessary to have at least iOS 12. On Android, here is the list of devices and their compatibility: https://developers.google.com/ar/devices

To enable the AR experience, check the Enable AR experience option (if available) in the properties. For iOS, you must also indicate the name of the USDZ file: it must be in the same ZIP file as the 3D object, which you uploaded to PandaSuite Studio.

To trigger the AR experience, create a button and associate the action Interact with a component > Launch AR.