The Ocavu Web SDK provides functionality for automatically embedding a model preview or thumbnail as the source of an image element or a background image on other elements. To do so, add either of the following attributes: data-ocavu-preview or data-ocavu-thumbnail
Model Preview vs Model Thumbnail
A model preview is a rendered snapshot generated by Ocavu Portal when you upload your 3d model into the system.
A model thumbnail is the image that can be configured within a model's details in Ocavu Portal. By default, it uses the model preview of your model's published draft, but you can upload your own thumbnail.
Image Source vs Background Image
The typical way to place an image on a web page is to use an img tag:
<img src="https://view.ocavu.com/ocavu-web/Yamaha_Baby_Grand_Piano/thumbnail" alt="Yamaha Baby Grand Piano">
However, other elements can also render images by using a background image:
<div style="width: 500px; height: 500px; background-image: url(https://view.ocavu.com/ocavu-web/Yamaha_Baby_Grand_Piano/thumbnail)"></div>
The Web SDK automatically detects whether to use a image source or background image, depending on the kind of element that has the data-ocavu-thumbnail or data-ocavu-preview attribute.
Configure which model to use for the preview
When you add the data-ocavu-preview or data-ocavu-thumbnail attribute to an element, you typically must set the value to a model key present within your Ocavu Portal account.
However, if the embedded image is also being used as an experience launcher or integrated viewer container, the value of the data-ocavu-preview or data-ocavu-thumbnail attribute can often be omitted. This is because the Web SDK will detect and use the model key configured for the experience launcher or integrated viewer.
Usage examples
A model thumbnail used as an image source:
<img data-ocavu-thumbnail="Yamaha_Baby_Grand_Piano">
A model thumbnail used as a background image:
<div style="width: 500px; height: 500px;" data-ocavu-thumbnail="Yamaha_Baby_Grand_Piano"></div>
A model preview used as an image source:
<img data-ocavu-preview="Yamaha_Baby_Grand_Piano">
A model preview used as a background image:
<div style="width: 500px; height: 500px;" data-ocavu-preview="Yamaha_Baby_Grand_Piano"></div>
Omitting the value of the data-ocavu-thumbnail attribute due to the presence of an experience launcher:
<a data-ocavu-icon data-ocavu-key="Yamaha_Baby_Grand_Piano">
<img data-ocavu-thumbnail>
</a>
Omitting the value of the data-ocavu-preview attribute due to the usage of an integrated viewer:
<div style="width: 500px; height: 500px;" data-ocavu-preview data-ocavu-key="Yamaha_Baby_Grand_Piano" data-ocavu-embed data-ocavu-trigger="click" data-ocavu-icon data-ocavu-cta="Click to Launch!"></div>
For more information: