To help foreign trade companies better showcase complex products (such as machinery, precision components, and consumer electronics) to global customers, SX-Creval has launched a new 3D model display function based on industrial-grade WebGL technology. Without installing any plugins, your overseas customers can perfectly adapt to the web browser on PC/mobile devices, dragging and viewing product details in 360°, and even experiencing a stunning "scrolling explosion disassembly" effect.
This system provides two core 3D modules: standard 3D display and 3D scrolling deconstruction & click interaction .
Module 1: Standard 3D Block
Core value : Replacing traditional static images, allowing customers to freely drag and view product details. Supports "automatic rotation of specified core components," instantly grabbing the customer's attention.
1. Basic Layout and Model Introduction
- Title and Description : Supports customizable main title, subtitle (such as PRODUCT Badge), text color, and alignment.
- Module layout method :
- Left 3D - Right text: Suitable for emphasizing product appearance.
- Left text - Right 3D: Suitable for reading the selling points first and then experiencing the model. (Mobile devices will automatically and intelligently adapt to the top-bottom layout).
- External link to model (.glb) : Enter the URL of your 3D model. ( Best practice : It is recommended to upload the model to free object storage such as Cloudflare R2 or Tencent Cloud COS for a fast global loading experience without affecting the website's SEO performance.)
- GLB model upload: Available only to customers with independently deployed servers.
2. 3D Effects and Texture Settings (Effect Settings)
In the "Effect Settings" panel, you can adjust various rendering effects:
- 3D frame display height : Available in 4 sizes from "small (400px)" to "full screen height".
- Model scaling factor : Default 1.0. Increase this value if the model is too small. (Both of these settings can visually change the model's size.)
- Lighting texture (built-in environment) :
- Bright (Commerce): Suitable for most industrial and consumer products.
- Cinematic High Contrast (ACES): Suitable for metallic and dark-colored high-end products.
- Neutral: Suitable for medical devices, white goods, etc.
- Bottom shadow : Supports adjusting the "shadow depth" and "edge blur" to ensure the product lands smoothly and without looking abrupt.
3. Advanced function: Allows specified parts to rotate continuously.
If your product has core moving parts (such as fan blades, motor shafts, gears, etc.), you can make it run automatically and continuously on the screen! It's also very easy to operate!
- Part name to be rotated : Enter the part name you named in the 3D software. (Don't know how to obtain it? See the Q&A at the end of the article).
- Part rotation axis : Select X, Y or Z axis.
- Part rotation speed : Adjusts the rotation speed. Entering a negative number will rotate in the opposite direction (default 0.05).
(Note: The system defaults to enabling "mouse drag" and "slow rotation". To prevent affecting webpage scrolling, the system has thoughtfully disabled the mouse wheel zoom function.)
Module 2: 3D Scrolling Deconstruction & Click Interaction (Explode 3D Block)
Core Value : A silky-smooth interactive experience comparable to Apple's official website! As customers scroll down the webpage, the product automatically explodes and unfolds , revealing its intricate internal structure; hovering the mouse over parts illuminates them, and clicking them brings up detailed selling points. This significantly enhances professionalism and increases customer dwell time!
1. Global Explosion Spread Settings (Simplified Configuration)
Your model doesn't need any animation in 3D software; the SX-Creval engine will automatically decompose it using algorithms.
- Global explosion dispersion direction :
- Radial (spreading out in all directions): The most impressive! Parts fly out in all directions. (Built-in anti-stack correction algorithm, so even if the parts are arranged vertically, they will still spread out).
- Y-axis (separated vertically): suitable for products with columnar or stacked structures (such as water filters and multi-layer circuit boards).
- X-axis/Z-axis: Suitable for products that are joined together horizontally or front-to-back (such as mobile phone cases, precision molds).
- Global Spread Distance Multiplier : Controls the intensity of the explosion (default 1.0). The larger the value, the wider the spread. You can set the preview value according to the characteristics of your model to achieve the best effect.
2. Parallax scrolling trigger
- Working principle : When the module is scrolled to the center of the screen, the image will automatically lock. As the user continues to scroll the mouse down, the product parts will smoothly separate; when scrolling up, they will automatically and seamlessly merge.
3. Core Functionality: Specifying Interactive Parts and Hover Panels
You can select key internal components and add detailed selling points descriptions for them:
- Add a "Specified Parts" list in the backend. (Don't know how to retrieve it? See the Q&A at the end of the article.)
- 3D Part Name : Enter the name of the part that needs to be interacted with.
- The panel displays a title and detailed content : Enter the advantages, material, or manufacturing process of the part (rich text is supported).
Customer reception experience :
- When the product is dispersed, if the customer moves the mouse over the part, the part will automatically light up and become highlighted (tech blue) .
- Clicking on the part will bring up a frosted glass-like instruction panel on the right with an extremely smooth animation. You can close it at any time by clicking the upper right corner after reading it.
Getting Started and Frequently Asked Questions (Q&A)
Q1: What 3D model formats does the system support?
A : SX-Creval fully embraces the latest Web 3D standards and only supports the .glb format. This format is small in size, loads quickly, and includes complete materials and textures. You can have your designers/engineers export .glb files from software such as SolidWorks, Blender, and C4D.
Q2: How do I know what to fill in for my "3D Part Name"?
A : We have prepared an official 3D viewing tool for you!
- Please visit the official 3D viewer provided by Shangxian Technology: https://www.sxglpx.com After opening the website, you can find the '3D Model Viewer' in the free section.
- Drag your .glb model into the container, click on the part you want to rotate or interact with, and you will see the exact name of the part (such as Gear_01 or Material_Metal, or even the Chinese name you gave it in the 3D software, such as "fan blade").
- Simply copy this name into the corresponding "Part Name" field in the backend. (Note: The system supports fuzzy matching and is case-insensitive; partial names will also be recognized!)
- Best practice: We recommend that you group and name the parts in the 3D software beforehand, which will make it much easier for you to set them up in the system.
Q3: What should I do if the model file is too large and loading is slow?
A : For independent websites in the foreign trade sector, page loading speed directly affects Google SEO ranking .
- It is recommended that the size of a single model file be kept between 2MB and 10MB .
- Please have the designer reduce the number of faces in the model before exporting (reduce the number of faces) and compress the texture resolution (it is recommended not to exceed 2K).
- We strongly recommend using Cloudflare CDN to accelerate your model URLs.
Q4: Why doesn't the model zoom in or out when I scroll the mouse wheel in the foreground?
A : This is an optimization design made by the SX-Creval team after testing on numerous B2B websites. If scroll wheel zooming of 3D models were allowed, the mouse could easily get stuck in the 3D area when a customer browses the webpage, preventing the page from scrolling further (commonly known as a "scroll wheel trap"). Therefore, we disabled scroll wheel zooming but retained the left-click drag-to-rotate permission to ensure the best web browsing experience.