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.

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
• Starting play
• Pause playing
• Append animation
• Detach animation
• 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
• Append animation
• Detach animation
• Recenter
• Activate AR

When you use Play, you can fine-tune playback:

• Animation #: Select which embedded animation to play (1 = the first animation).
• Ping-pong: Plays forward then backward continuously (loop/repetitions are ignored).
• Loop: Plays continuously.
• Repetitions: Number of times to play when Loop is disabled.

To combine animations, use Append animation (adds an animation layer) and Detach animation (removes it). These actions also expose extra parameters such as Speed, Fade in/out, Warp speed, and Start time.

Append animation parameters:

• Animation #: Select which embedded animation to add.
• Speed: Animation speed multiplier.
• Weight: Blend weight (0–1). Hidden if Fade in is enabled.
• Fade in and Fade in duration: Gradually increases the animation influence.
• Warp speed, Warp duration, Relative warp: Smooths the speed change.
• Start time: Starts the animation at a specific time.
• Ping-pong, Loop, Repetitions: Same playback logic as Play.

Detach animation parameters:

• Animation #: Select which animation to remove.
• Fade out and Fade out duration: Gradually removes the animation influence.

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 > Activate AR.