The 360° panoramic module is a core component of the SX-Creval system used to create immersive digital showrooms. It can bring your corporate headquarters, factory workshops, showrooms, or large-scale exhibition venues online in a 1:1 scale. Users can view spatial details from 720 degrees without blind spots by dragging with a mouse or swiping with their mobile phones.
This module not only supports panoramic roaming, but also has a built-in highly technological interactive system (such as glowing hotspots, floating information boxes, and bottom scene thumbnails), making it an excellent tool for foreign trade companies to showcase their strengths and enhance customer trust.
Smart Demo Mode : When you first add this module to the page, before uploading any images, the system will automatically play the built-in "Factory Assembly Line" demo data. This allows you to preview the effect intuitively before starting to replace your own content.
1. Core Concept Analysis
Before you begin configuring, you only need to understand two basic concepts that are like "building blocks":
- Scene : Represents a separate space. For example, "First Floor Reception Hall" is one scene, and "Second Floor Production Workshop" is another. You can create an unlimited number of scenes.
- Hotspot : An interactive button that floats in 3D space. When a user clicks a hotspot, a product introduction box may pop up, or the user may be teleported directly to another scene like a "door to anywhere".
2. Module Configuration Guide
2.1 Overall Settings (View360)
- Default Display Scene ID : The first scene that a customer sees when they open the webpage. Please enter the "Scene ID" of a scene from the list below. If left blank, the system will display the first scene in the list by default.
- Scene list : Click "Add panoramic scene" to start building your space.
2.2 Scene Setup (Scene Block)
For each individual space, you need to configure the following information:
- Scene ID : A unique identifier for this space. Only letters and numbers are allowed (e.g., showroom, factory01). This ID is very important; it will be used later when setting up "scene switching".
- Scene Name : The display name of the space (e.g., Product Showcase Center). It will be displayed as a thumbnail at the bottom and in the top left corner of the interface.
- Panoramic View : Upload your 360-degree panoramic photo.
- Size recommendation : The aspect ratio must be strictly 2:1 .
- Recommended resolution : Width should be between 4096 and 5000 pixels to ensure high-definition image quality. (No need to worry about large images causing webpage lag; the SX-Creval system will automatically slice and compress large images using WebP in the background, ensuring a lightning-fast loading experience.)
2.3 Hotspot Block Settings
You can add multiple "hotspots" within a scene. Hotspots come in two types:
Type 1: Info Modal
Used to introduce a device or product in a space.
- Prompt text/pop-up title : Short text displayed when hovering over the glowing point, and the large title of the pop-up box.
- Pop-up description : Detailed product or equipment introduction.
- Pop-up image : An introductory image. The system will automatically crop and compress it into a high-resolution small image suitable for the pop-up window.
Type 2: Scene Transition
Used for spatial navigation, guiding customers to the next room.
- Prompt text : For example, "Enter the production workshop".
- Target Scene ID : Enter the "scene ID" you want the customer to go to (e.g., factory01).
3. Exclusive advanced feature: How to obtain the 3D coordinates of a hotspot?
When configuring a hotspot, the system will ask you to enter the pitch and yaw angles , which determine the exact hover position of the hotspot in the panoramic view.
In traditional systems, this requires complex code calculations, but in SX-Creval, it can be accomplished in just two steps:
- To enter preview mode : After editing and saving the panoramic image in the Wagtail backend, click the "Preview" button on the right side of the page.
- Click to select a hotspot : In the preview interface, use your mouse to rotate the panoramic view to the location where you want to place the hotspot, and then click on that location .
- One-click copy : At this point, a black "coordinate picker" will automatically pop up at the top of the screen, displaying precise Pitch and Yaw values. Click this black box, and the values will be automatically copied to your clipboard. You can then paste them directly into the input box in the background.
4. Front-end User Experience Description
SX-Creval features a highly modern user interface for its 360° panoramic module:
- Automatic navigation : After the page loads, the panoramic view will automatically and slowly rotate to display the entire space.
- The right-side quick control panel includes icons for one-click phone calls, sending emails, zooming in/out, pausing/playing, and rotating. It uses a frosted glass-like semi-transparent material to avoid obstructing the view.
- Bottom Scene Navigation Bar : A list of thumbnails for all scenes is automatically generated at the bottom of the screen. Mouse dragging is supported on PC, and smooth finger swiping is supported on mobile. Tap a thumbnail to instantly switch scenes. The system automatically crops and generates extremely small thumbnails from your uploaded large original images, consuming no extra data.
- Immersive HUD pop-up : When a customer clicks on the "Information Pop-up" hotspot, a beautifully designed frosted glass information panel will smoothly rise in the lower right corner, displaying product details with images and text. The background panorama will automatically stop rotating to maintain reading focus.