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.
In this article, we will go over how you use the different parts of the 3D object and how you can adjust its settings.
How to upload the 3D File
In the Properties tab, click 'Select a file' or drag and drop your file directly onto the field to upload your file. The 3D object only supports .glb/.gltf files, so make sure you upload in a compatible format.
Read more about the file formats supported
Read more about the file formats supported
We only support .glb/.gltf 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 receive a model you can edit it with Blender, a free 3D modeling software, remove all lighting, and export it to .glb/.gltf.
How to upload a poster image
To upload a poster image click 'Select a file' or drag and drop your file directly onto the field. Leave this one blank if you want to keep the initial loader. If your 3D model needs time to load when someone is viewing your page, the image you upload here will show until the model is ready.
How to set up hotspots
Add more interactivity to your 3D model by setting up hotspots. There are two main steps you need to take to do this 1) Add hotspots to the 3D object, and 2) Connect hotspots to a frame. Learn how to do both below.
Add hotspots to the 3D object
First, you need to add hotspots to the areas of the 3D model you want a user to interact with.
Click the 'Edit hotspots' button.
Click on the areas of your model to add your hotspots. Rotate your model by clicking and dragging.
Exit the modal by clicking the 'x' button on the top-right corner.
Connect hotspots to frames
Before connecting your hotspots, make sure you have the frame you want to connect to the hotspot ready. We recommend giving the frame a name that makes it easy to find.
To connect the hotpots to the frames, you need to use interactions. Go ahead and open the Interactions tab on the right side and follow the steps below.
Select the trigger 'Hotspot clicked'.
In the 'If' field, set it to equal the hotspot number you want to be the trigger.
The target should then be the frame you want to connect the hotspot to.
Then, select the action you want to initiate when the hotspot triggers.
How to edit the initial view
The initial camera view lets you select which perspective to show the 3D model in the first view.
Click the 'Edit initial camera' button to open the modal to edit the initial view.
From here you can rotate, zoom, and pan the model to adjust the perspective to your needs.
Save the view by clicking 'Save'.
Other configuration options
Below the 'Edit hotspots' and 'Edit initial view' buttons you can find the rest of the setting configurations as listed below.
Parameter | Description |
Lighting | If your uploaded model has Lighting settings, you can select them from this dropdown. |
Drag | Toggle on to allow users to drag the model to see it from multiple directions. |
Zoom | Toggle on to allow users to zoom in on the model. 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. |
Animation | If your uploaded model has animation setting, you can select them in this dropdown. |
Rotate | Enabling 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. |
Rotation speed | If Rotate is toggled on, decide how fast the model should rotate by adjusting the rotating slider. |
Loop alternate direction | If Rotate is toggled on, you can toggle on the alternate direction to make the model rotate in the opposite direction. |