thumb-composant-3D-AR.png

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. 

 
3D_AR_component.png
 
 

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
properties_3D_AR_component.png
 
 
 

Markers

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.png
 
If 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.

 
triggers_3D_AR_component.png
 
 

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.png
 
 

Synchronize 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.

synchro_composant_3D_AR.png

 

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

Was this article helpful?
1 out of 1 found this helpful

Create today your interactive content

Easy-to-use ∗ Free ∗ No installation

START NOW!