# 360° Image/Video

> Add immersive 360° images or videos to PandaSuite, configure gyroscope and touch navigation, VR mode, auto-rotation, markers, synchronization, and component actions.

https://docs.pandasuite.com/essentials/multimedia/360-image-video/

**Use the 360° component to display panoramic images or videos, let users explore them with touch, mouse, gyroscope, or VR mode, and add markers to guide navigation or trigger content.**

## Prepare 360° content

PandaSuite displays 360° content, but it does not create the panoramic source file. Prepare an equirectangular image or video (the standard 2:1 panorama format) with a 360° camera or specialized software such as [3DVista](https://www.3dvista.com/en/) or [GoThru](https://gothru.co/).

If your virtual tour is already built in a third-party tool, you can also embed it with the [Web component](https://docs.pandasuite.com/essentials/components/web/) or follow the [3DVista embed guide](https://docs.pandasuite.com/essentials/integrations/embed-3d-vista-tour-in/).

## Insert a 360° image or video

To insert a 360° image or video in your project:

1. Click **Components** and insert the **360°** component.
2. In **Properties**, set **Type** to **360° Image** or **360° Video**.
3. Select the **Image** or **Video** resource.
4. Configure navigation, controls, and playback options.
5. Double-click the component area to preview and edit its 360° view.

## Main properties

The 360° component exposes these main properties:

- **Type**: choose **360° Image** or **360° Video**.
- **Show controls**: display the on-screen control bar for zoom, movement, and fullscreen, plus playback controls when the component shows a 360° video.
- **Gyroscope**: enable device-orientation navigation on supported devices. On iOS, the user may need to tap the screen before the browser grants motion access.
- **VR mode**: add a stereoscopic VR button for split-screen navigation based on the gyroscope.
- **Auto-rotation** and **Rotation speed**: rotate the view automatically until the user interacts with it.
- **Autoplay**, **Muted**, and **Loop**: control video playback. **Muted** improves autoplay reliability on mobile devices.

## Adjust navigation and zoom

Use the navigation properties to decide how users move inside the 360° view:

- **Drag to rotate**: let users drag or swipe to rotate the view.
- **Drag speed**: adjust how quickly the view rotates while dragging.
- **Inertia**: keep the view gliding after a drag. Set it to `0` to stop immediately.
- **Two-finger pan**: require two fingers to rotate the view on touch screens. Enable it when the component sits inside a scrolling page, so a one-finger swipe still scrolls the page instead of rotating the view.
- **Scroll to zoom** and **Zoom speed**: let users zoom with the mouse wheel and control the zoom sensitivity.
- **Min FOV** and **Max FOV**: define the zoom-in and zoom-out limits. A smaller field of view means the user is more zoomed in.
- **Fisheye effect**: add a barrel distortion to the panoramic view.

These properties default to standard 360° navigation, so you only need to adjust the ones that matter for your project.

## Use two kinds of markers

The 360° component supports two kinds of markers:

- **Viewpoint markers** save a camera orientation and zoom level.
- **Hotspot markers** add a clickable point inside the panorama.

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

### Viewpoint markers

Use viewpoint markers when you want to save a precise view and return to it later.

To create one:

1. Double-click the component to enter the 360° view.
2. Rotate and zoom until the panorama is framed as needed.
3. Click the **+** button to create a marker.

For each viewpoint marker, you can adjust **Horizontal angle**, **Vertical angle**, and **Zoom**. To update a saved viewpoint, select the marker, move the camera to the new view, then click **Update** next to **Marker data**.

Viewpoint markers are useful for:

- guiding users through a virtual tour;
- defining a set of views for another component to control;
- synchronizing the 360° camera with a scroll or slider;
- triggering content when the camera reaches the saved view.

### Hotspot markers

Use hotspot markers when you want users to tap or click a point of interest inside the panorama.

In Studio, enter the 360° view and click **Add hotspot**. Then click the panorama to place the hotspot. Each hotspot becomes a PandaSuite marker that you can use as a trigger.

For each hotspot marker, you can configure:

- **Label**: text shown as the marker tooltip.
- **Image**: a custom marker image. Its width follows **Size** and its aspect ratio is preserved.
- **Size**: marker diameter, or image width, in pixels.
- **Color** and **Border**: dot appearance when no custom image is set.

Use custom marker images for icons, numbered points, or branded navigation. Use colored dots for quick annotations or simple points of interest.

## Available triggers

Open the **Actions** window.

Here is the list of available triggers:

- **Single tap**
- **Double tap**
- **Touch down**
- **Touch up**
- **Hotspot tapped** for hotspot markers
- **Viewpoint reached** for viewpoint markers

**Single tap** and **Double tap** expose **Horizontal angle** and **Vertical angle**, so you can reuse the tapped position in your logic.

**Viewpoint reached** fires when the view aligns with a viewpoint marker, however the camera gets there (drag, gyroscope, auto-rotation, **Go to marker**, or synchronization). Use it to reveal content as the user explores the panorama on their own.

## Available actions

Select a trigger and choose **Interact with a component** > **360°**.

Here is the list of available actions:

- **Play**
- **Stop**
- **Pause**
- **Play/Pause**
- **Go to marker**

### Go to marker

Use **Go to marker** to animate the camera to a viewpoint marker or a hotspot marker. Adjust **Transition duration** to control the camera animation in milliseconds. Set it to `0` for an instant move.

## Synchronize viewpoints

Like any component, the 360° component can be synchronized with another component, such as a [Scrolling Area](https://docs.pandasuite.com/essentials/components/scrolling-area/) or a slider-style navigation. Add the components to a [Synchronization](https://docs.pandasuite.com/essentials/components/synchronization/) component and choose **Synchronize viewpoints**.

Synchronization uses viewpoint markers. Hotspot markers remain interactive points and are ignored by the synchronization.

## Practical example: guided virtual tour

To create a guided virtual tour:

1. Add one viewpoint marker for each key view of the panorama.
2. Add hotspot markers on points of interest, such as artworks, rooms, or product details.
3. Create buttons or a menu that uses **Go to marker** for the viewpoint markers.
4. Use **Hotspot tapped** on hotspot markers to open a [Pop-up](https://docs.pandasuite.com/essentials/components/pop-up/) or change a [Multi-state](https://docs.pandasuite.com/essentials/components/multi-state/) component.
5. Preview the project and confirm that each marker moves to the expected view or opens the expected content.

## See also

- [Markers](https://docs.pandasuite.com/essentials/interactions/markers/)
- [Synchronization](https://docs.pandasuite.com/essentials/components/synchronization/)
- [Embed 3DVista tour](https://docs.pandasuite.com/essentials/integrations/embed-3d-vista-tour-in/)
- [Create a 360° product viewer](https://docs.pandasuite.com/tutorials/how-to/create-a-360-product-viewer/)