All Collections
Vev Components
Elements
Adding a 3D object element
Adding a 3D object element

Add a 3d object to any design and let users play and interact with it directly on the page

Tiril Uggerud avatar
Written by Tiril Uggerud
Updated over a week ago

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 element in Vev

๐Ÿ‘๐Ÿฝ 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

Did this answer your question?