How to Add and Configure 3D Models in components?
Questions:
- How do I add a 3D model to my banner?
- How do I turn on Augmented Reality (AR) for my slides?
- How do I adjust shadows and exposure on a 3D asset?
- Why do I need a 3D poster image?
Description:
This guide explains how to integrate interactive 3D models into your multi-slide banner for an immersive visitor experience. You can fine-tune the lighting, enable rotation, and activate augmented reality features directly from the settings panel.
We'll show you, step by step, how to:
- Upload Assets: Add your 3D files into the slide container.
- Enable Interactivity: Turn on auto-rotation and AR capabilities.
- Control Lighting: Adjust shadow intensity, shadow softness, and overall exposure.
- Assign Posters: Set a static image to display while the model loads.
Solution:
-
Select the 3D Media Format - Click the cube icon at the top of the media settings panel to activate the 3D model configuration mode.
-
Upload Your 3D Asset
Click "Change Media File" or the main upload area to browse your library and select your 3D file.
-
Enable Interactivity and AR - Use the toggle switches to activate "Auto Rotate" so the model spins automatically on the screen. Toggle "Enable AR" to allow users on compatible mobile devices to view the model in their physical space.
-
Adjust Lighting and Shadows
Drag the provided sliders to fine-tune the visual presentation of your model. You can adjust the "Shadow Intensity," increase the "Shadow Softness," and modify the overall "Exposure" to make the model blend perfectly with your banner design.
-
Assign a 3D Poster
Scroll down to the "3D Poster" section and click the camera icon to open the media library. Upload a static thumbnail image that will display to visitors while the heavy 3D asset is rendering in the background.
-
Enter Alternative Text
Navigate to the very bottom of the panel and type a clear description in the Alternative Text field. This text provides necessary context for screen readers and assists with accessibility.
Tips and Tricks:
Pro-Tips:
- Always enable the AR toggle if you are showcasing products, as this allows mobile users to project the item into their own room for a better buying experience.
- Adjust the exposure slider carefully if your banner has a light background, ensuring the model does not appear washed out.
Warnings:
- Do not forget to assign a 3D Poster image; without it, visitors might see a blank space while the 3D file processes upon their initial page load.
- Avoid setting the shadow intensity too high on dark backgrounds, as the model may lose definition and become difficult to see.