Skip to content
PandaSuite Docs

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 or GoThru.

If your virtual tour is already built in a third-party tool, you can also embed it with the Web component or follow the 3DVista embed guide.

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.

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
  • Marker tapped for hotspot markers

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

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 or a slider-style navigation. Add the components to a 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 Marker tapped on hotspot markers to open a Pop-up or change a Multi-state component.
  5. Preview the project and confirm that each marker moves to the expected view or opens the expected content.

See also