Adding 3D assets to your content can bring a whole new spin to your designs. With Vev, you can add 3D files using our native element or integrate from popular tools like Spline or Sketchfab.
👍🏽 Adding a 3D object
From the top menu bar, click on the Add Menu (
Shortcut: M)Search for and select '3D Object'
Click and drag the element onto your canvas
Uploading a 3D File
Double-click the 3D Object element
Hit Click to upload (or drag and drop your file directly into the form)
Supported 3D File Formats
Currently, we only support .glb/gltf files for the 3D object element. This is due to a few factors:
Incredibly lightweight compared to other 3D file formats
The only format that contains a full PBR shader and textures
Can be viewed near-instantaneously and optimized for mobile
There are a few drawbacks, namely, its small file size may cause texture and details to appear different than in your original 3D modeling software. But .glb provides the strongest advantages when delivering 3D as a web or mobile experience.
We recommend removing any light objects when creating your model, as the current version of the 3D Viewer adds a point light and sets the tone mapping to ACES Filmic, and tone exposure to 1. If you received a model you can edit it with Blender, a free 3D modelling software, remove all lighting and export to glb/gltf.
🎨 Customizing a 3D object
Not only can you display a 3D object but you can add interactivity like hotspots to deliver more insights about the particular model as well as customize the loading interface on the page.
Adding Hotspots
In order to add a hotspot to a 3D model and have text display with more information, this needs to be done in two parts:
Setting the hotspot position
Creating the hotspot container and text
Setting the hotspot position
Navigate to the Hotspots tab within the element. From here, you can click on a specific area of the 3D model using the thumbnail viewer to create the first hotspot.
In the form field for hotspot 1, we will call our custom text that we will set up in the next step.
Creating the hotspot container and text
To create the text or container that will display for each hotspot, you can use the Design Editor as you would normally:
Add a text element to your canvas
Add the text you'd like for the specific hotspot, in this case, we are adding information for the astronaut's helmet
Give a custom name to that text element, in this case, we've named it helmet
Go back to the 3D object menu by double-clicking the element and in the hotspot 1 form field
Call the custom name we gave the text element, for example, helmet
Lastly, toggle the visibility of the text element or container to be 'off' so it does not appear by default
Tip: Make sure to toggle the visibility of your hotspot text or containers to be off when publishing, so they do not appear by default.
Uploading a poster image
Poster images are handy when your model is initially loading when a user first visits the page. From this tab, you can upload a PNG or JPEG image of the model that will show while the 3D model is loading. You can also leave it blank to keep the initial loader instead.
Settings
From the settings tab, you will be able to access even more customization options like auto-rotate and zoom.
Parameter | Description |
Auto Rotate | Enabling auto-rotate will animate your 3D model to rotate freely in space without any user interaction. By toggling this feature off, your model will remain still in its initial position |
Enable Zoom | Enabling zoom will allow users to zoom in on the model using their mouse scroll. This is particularly useful when you want users to explore specific details of the model. However, in a standard web experience, we recommend disabling this feature so users can easily scroll past the 3D model down the page. |
Hotspot Color | Change the hotspot color |