3D & Augmented Reality
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.
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
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
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)
- Start AR
Synchronize with another component
Like any component, you can
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:
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 >