# 3D & Augmented Reality

> Add a 3D model to your PandaSuite project, create camera markers and interactive hotspot markers, control animations, and launch an augmented reality experience on compatible devices.

https://docs.pandasuite.com/essentials/components/3d-and-augmented-reality/

**Use the 3D / AR component to display a GLB or glTF model, save camera views as markers, place interactive hotspot markers on the model, and launch an AR view on supported mobile devices.**

## Add a 3D model

Your source model must be in `GLB` or `glTF` format.

> **Info**
>
> To convert an `FBX` file to `GLB`, you can use a service such as
> [clara.io](https://clara.io/).

1. Compress your model into a ZIP archive.
2. In PandaSuite Studio, open **Files** and import the ZIP file.
3. Insert the **3D / AR** component from **Components**.
4. In **Source**, select your ZIP file.
5. In **File name**, enter the exact file name or path of the `GLB` or `glTF` file inside the archive.

If you want to use a custom environment image, add it to the component resources as **Environment**. If you want to support AR on iOS, include a matching `USDZ` file in the same ZIP archive.

[Image: 3D / AR component of a potted tulip screen: Source is potted-tulip.zip and File name is potted-tulip.glb, the file inside the ZIP]

Double-click the component on the canvas to enter the 3D view. From there, you can move the camera, inspect the model, create markers, and add interactive hotspot markers. Use the breadcrumb to return to the screen.

[Video: in the 3D view of PandaSuite Studio, the cursor turns the potted tulip, looks at it from above, then zooms in and out]

## Main properties

The 3D / AR component exposes the following main properties:

- **Camera controls**: lets users rotate and zoom around the model.
- **Allow pan**: lets users move the view horizontally and vertically.
- **Allow look inside**: lets the camera orbit move closer to or inside the model.
- **Animate markers position**: animates the transition when moving from one camera marker to another.
- **Interaction prompt** and **Delay**: displays a hint that encourages users to interact with the model after a delay.
- **Auto rotate** and **Delay**: starts rotating the model automatically after a delay.
- **Environment image**: uses **Neutral**, **Legacy**, or **Custom** lighting.
- **Use as skybox**, **Skybox height**, and **Unit**: available when using a custom environment image as the scene background.
- **Exposure**, **Shadow intensity**, **Shadow softness**, and **Tone mapping**: adjust the rendering of the model.
- **AR (if available)**, **iOS support**, and **USDZ File name**: enable and configure the augmented reality experience.

## Use two kinds of markers

The 3D / AR component supports two different marker workflows:

- **Camera markers** save a camera view around the model.
- **Interactive hotspot markers** add a clickable point directly on the model surface.

Both appear as PandaSuite markers, but they are used differently.

### Camera markers

Use camera markers when you want to save a viewpoint and come back to it later.

To create one:

1. Double-click the component to enter the 3D view.
2. Place the camera on the exact angle you want to save.
3. Click the **+** button to create a marker.

[Image: Markers panel of the 3D view, framed, with two camera markers, Front and Top, and the + button used to create a new one]

To update a saved camera marker, select it, move the camera to the new angle, then click **Update** next to **Marker data** in the marker properties. The marker now points to the new view.

Camera markers are useful for:

- guiding the user through several predefined views of the same model;
- synchronizing the camera with another component;
- creating smooth animated transitions between viewpoints when **Animate markers position** is enabled.

### Interactive hotspot markers

Use an interactive hotspot marker when you want the user to tap or click a precise point on the model.

In Studio, open the 3D view and click **Add Hotspot**. Then click the model to place the hotspot. Each hotspot becomes a PandaSuite marker that you can use as a trigger.

For each interactive hotspot marker, you can configure:

- **Image**: a custom image shown instead of the colored dot. Its width follows **Size** and its aspect ratio is preserved. When you set an image, **Color** is hidden.
- **Color**: color of the dot when no image is set.
- **Size**: size in pixels (the dot diameter, or the image width).
- **Min opacity**
- **Max opacity**
- **Show annotation**
- **Message**
- **Color** and **Text color** for the annotation

Use the **Image** option when you want branded pins, icons, or numbered points of interest instead of a plain dot.

This makes interactive hotspot markers useful for:

- opening a [Pop-up](https://docs.pandasuite.com/essentials/components/pop-up/) with more information;
- changing a [Multi-state](https://docs.pandasuite.com/essentials/components/multi-state/) component;
- guiding a product tour or a training experience with clickable points of interest.

## Available triggers

In the **Actions** tab, the 3D / AR component provides these triggers:

- **Position**: triggered by a marker. This can be a saved camera marker or an interactive hotspot marker.
- **Model Loaded**
- **Model Error**
- **Starting play**
- **Pause playing**
- **Append animation**
- **Detach animation**
- **Start of user interaction**
- **End of user interaction**
- **AR Error**

[Image: Triggers of the 3D / AR component: a Position trigger for each camera marker, Front and Top, framed, among Model loaded and others]

The animation-related triggers also expose **Animation #** and **Animation name**, which you can reuse in your logic.

## Available actions

Use **Interact with a component** to control the 3D / AR component from another interaction. The available actions are:

- **Change Position**
- **Play**
- **Pause**
- **Append animation**
- **Detach animation**
- **Recenter**
- **Start auto-rotate**
- **Stop auto-rotate**
- **Activate AR**

[Image: Interact with a component on the 3D / AR component: Change Position, Play, Pause, Activate AR, Recenter, auto-rotate and more]

### Change Position

Use **Change Position** to move the camera to a saved camera marker.

When **Animate markers position** is enabled, you can also adjust **Interpolation decay (ms)** to control how quickly the camera settles into the new view.

### Play

Use **Play** to launch one of the animations embedded in the model:

- **Animation #**: selects which animation to play.
- **Ping-pong**: plays forward then backward in a loop.
- **Loop**: plays continuously.
- **Repetitions**: number of repetitions when **Loop** is disabled.

### Append animation and Detach animation

Use **Append animation** to add an animation layer on top of the current state, and **Detach animation** to remove it.

**Append animation** parameters:

- **Animation #**
- **Weight**
- **Speed**
- **Ping-pong**
- **Loop**
- **Repetitions**
- **Fade in** and **Fade in duration**
- **Warp speed**, **Warp duration**, and **Relative warp**
- **Start time**

**Detach animation** parameters:

- **Animation #**
- **Fade out**
- **Fade out duration**

### Recenter

Use **Recenter** to reset the camera target on the model.

### Start auto-rotate and Stop auto-rotate

Use these actions to control the turntable rotation at runtime, regardless of the **Auto rotate** property:

- **Start auto-rotate** turns the turntable rotation on, even if **Auto rotate** is disabled in the properties.
- **Stop auto-rotate** turns it off and keeps it off. It does not resume on its own.

This pairing is handy for a play/pause turntable button. When **Auto rotate** is enabled, moving to a camera marker pauses the rotation during the transition, then resumes it once the camera reaches the view. Camera markers stay accurate even while the model is rotating.

## Synchronize with another component

Like any component, you can [synchronize](https://docs.pandasuite.com/essentials/components/synchronization/) your 3D model with another component such as a scrolling area.

To create a synchronization:

1. Insert the **Synchronization** component.
2. Click **+ Add** in its properties.
3. Select the **3D / AR** component and the second component.
4. Choose **Synchronize markers**.

Synchronization uses camera markers only. Interactive hotspot markers are ignored in synchronization.

[Image: Synchronization properties next to a 3D tulip: the 3D / AR component is added with Synchronize markers on, framed, above + Add]

## Launch the AR experience

On iOS and Android, you can display the 3D object in augmented reality above the device camera.

To configure AR:

1. Enable **AR (if available)**.
2. On iOS, enable **iOS support**.
3. Enter the **USDZ File name** that matches the file included in your ZIP archive.

To launch AR from your interface, create a button and use **Interact with a component** → **Activate AR**.

If the device cannot launch AR, the component triggers **AR Error**. You can use this trigger to display fallback content.

[Image: AR button of the 3D model screen selected, with a single tap/click interaction that runs Activate AR on the 3D / AR component]

## Practical example: trigger content from a hotspot

One common workflow is to place several interactive hotspot markers on a product or a scene, then use them to reveal extra information.

1. Add a hotspot on each point of interest.
2. Enable **Show annotation** if you want a label directly on the model.
3. Create a [Pop-up](https://docs.pandasuite.com/essentials/components/pop-up/) or a [Multi-state](https://docs.pandasuite.com/essentials/components/multi-state/) component.
4. In the hotspot marker trigger, choose **Position**.
5. Associate the action that opens the pop-up or changes the state.

This lets users explore the model visually and access content only when they interact with a relevant detail.

## See also

- [Markers](https://docs.pandasuite.com/essentials/interactions/markers/)
- [Synchronization](https://docs.pandasuite.com/essentials/components/synchronization/)
- [Pop-up](https://docs.pandasuite.com/essentials/components/pop-up/)