3D & Augmented Reality

Insert a 3D object and project it into a real environment using Augmented Reality (AR). Create specific markers and interactions, synchronize it with any other component of PandaSuite Studio.

PandaSuite is compatible with GLB & glTF formats. 

If you don't have a 3D object, Poly by Google provides many 3D models, as well as the specialized Sketchfab platform.
With this component, you can also provide an augmented reality experience by embedding this 3D object in the camera field. 

The 3D / AR component

Insert the compressed 3D object in .zip format in the Media window.

Click on Components and insert the 3D / AR component. 


In the Properties window, click on the + Select Media and choose the .zip file.

Replace the file name.

Double-click on the area to make the 3D object appear and manipulate it from the studio.

Customize the component with the following properties :

  • Camera controls
  • Animated transition between markers
  • Interaction prompt
  • Enable auto rotation


Identify one or more positions of your 3D object that will serve as a trigger or object of an action.

Click + ADD MARKER (position). 

markers_3D_AR_component.pngIf you have checked Animated transition between markers, the transition between these markers will occur automatically even if you do not create an action.

Interactions & Synchronization

Trigger an action from your 3D object

Select your 3D/AR component and open the Interactivity window.

Here are the available triggers :

  • Model loaded
  • Position (marker)
  • Model error
  • Start playing
  • Pause playing

Associate the action of your choice.

Create an action on your 3D object

Choose an object, the trigger, and the action Interact with a component from the Interactivity window.

Here are the available actions :

  • Change position (marker)
  • Play
  • Pause
  • Activate AR
actions_3D_AR_component.pngSynchronize with another component 

To synchronize your 3D object with another component (for example, the scrolling area), insert the Synchronization from Components list.

In the Properties window, click Add Component. Choose the 3D/AR component and the other component from the list. Select the 3D/AR component and click Markers in the options.


Start the AR experience

In the Properties window, check the Enable AR experience (if available) option.

Specify the USDZ file name (required for iOS), it must be in the previously uploaded .zip file. 

Create a button and associate the action Interact with a component > Activate AR

Still need help? Contact Us Contact Us