Introduction

This article explains how the Explore SeekBeak 3D and 360° Image Integration sample experience was built and how you can reuse it for your own needs. To access this sample, use the Examples tab of the Experiences panel in Composer. This sample can be applied to a wide variety of use cases, from trade shows to retail stores.

You can download the sample here: Explore SeekBeak 3D and 360° Image Integration

You can also view the web version of the experience here: Explore SeekBeak 3D and 360° Model Integration - Web Experience

Disclaimer: An active SeekBeak account is required to use this sample. Seekbeak offers a 14-day free trial, after which a monthly or annual plan must be purchased.

About the "Explore SeekBeak 3D and 360° Image Integration" sample

How is this experience built?

This experience uses the SeekBeak platform for hosting 3D models and 360° images, collectively referred to as Snap Files. The SeekBeak Interface Asset used in this experience relies on SeekBeak’s Embed API, which uses secure postMessage events to enable two-way communication between the HTML Frame created in Composer and the embedded SeekBeak content.

• When a hotspot is clicked within the SeekBeak component, that component uses the SeekBeak Embed API to raise a trigger in the SeekBeak Interface Asset, sending the unique ID of that hotspot as a parameter.
• Conversely, you can use actions of the SeekBeak Interface Asset to tell a SeekBeak component in the HTML Frame to navigate to a certain waypoint, simulate a click on a hotspot (visible or not, to trigger animations, for example), or even to change the material variant of a 3D model.

Data structure of the Headless CMS Base

The structure of the Headless CMS base for this experience is made of three groups, each containing collections for different examples. They all include a Hotspot ID and Label.

Contents of the Headless CMS Base

"3D Model with Animation" Content

The content for the "3D Model with Animation" component includes two items: one for opening and one for closing the model using their unique Hotspot IDs.

These IDs map to the Hotspot IDs within the Seakbeek platform, identified using Edit Mode for the Snap File: 

"3D Model with Hotspots, Waypoints & Material Variants" Content

The "3D Model with Hotspots, Waypoints & Material Variants" component contains three collections, each of which has two properties used for specific functionality.

The "Material" collection contains two items: one to turn the video displays in the model on, the other to turn the video displays in the model off, using their unique Hotspot IDs.

The "Waypoints" collection contains five items, each with a corresponding reference Waypoint ID that correlates to a Camera Waypoint set within SeekBeak.

The "Hotspots" collection contains two items: one with information about the 55" outer wall display screen, the other about the VideoWall, each of which has visible hotspots with their own unique Hotspot IDs.

"360° Image" Content

The "360° Image" collection contains four items, each relating to one of four hotspots in the 360°  image. Each item has four properties. The "View" property is provided solely for visual reference, as two different Snap Files reference different hotspots. You'll notice we have an "Image" property to go with "Text to display," which serves as a visual example of what you can do with a 360° image.

Scene breakdown

"3D Model with Hotspots, Waypoints & Material Variants" scene

The onscreen Intuiface buttons are located within a collection driven by a data feed from the Headless CMS base. When a button is released, it sends a message to the SeakBeak Embed API, which triggers animation of the camera waypoint or material variant change. An HTML Frame asset embeds the SeekBeak content and use the postMessage API to enable two-way communication between the experience and the iframe. The Seekbeak Interface Asset sends and receives messages via this method, enabling real-time interaction between the experience and the embedded content.

When a hotspot in the SeekBeak 3D model is tapped, it triggers a "hotspot clicked" action. This action filters the content based on the Hotspot ID, allowing the relevant text to be displayed in the Hotspot Group pop-up associated with that specific Hotspot ID.

"3D Model with Animation" scene

The same actions transpire here as above with the previous scene. Intuiface buttons send messages to the SeakBeak Embed API, which then triggers the appropriate SeakBeak action to play the animation via an invisible hotspot.

"360° Image with Hotspots Fed by the H-CMS" scene

This scene uses two Snap Files for each of the different views in SeekBeak. When a hotspot is tapped in the 360° image, the resulting message is received by the SeekBeak Interface Asset, causing a filter to be applied to the content within the Headless CMS base. The result is to display the appropriate Hotspot Group and the relevant text based on the Hotspot ID. You'll notice we have conditions, which are needed to stop the Hotspot Group from displaying the pop-up when the view is changed.

How to reuse this experience

The easiest way to reuse this experience is to carry out the following steps:

1. Open the "Explore SeekBeak 3D and 360° Image Integration" experience in Composer.
2. Use 'Save as" to create a copy with a preferred name. For example, "SeekBeak Demo".
3. When you use "Save As," Composer will ask if you want to duplicate the Headless CMS Base. You will need to select "Duplicate" to duplicate the Headless CMS Base.
4. Customize the experience to suit your needs by altering the SeekBeak content or the content within the H-CMS base. This includes entering the credentials for your personal SeekBeak account.