Ocavu Reference Guide

Requirements:

• A Ocavu Account (How do I get an Ocavu account?)
• 3D Models loaded into Ocavu Portal (How do I request or upload 3D models of my products?)
• Ocavu SDK loaded on your website (How can I load the Ocavu SDK?)

Embedding a 3D viewer within a photo/video gallery on your website is an ideal way to add advanced functionality without taking up too much additional space on your page. Although gallery components can vary significantly, adding 3D/AR funcionality usually requires writing a custom script that achieves the following:

Step 1

Get a reference to the primary image container and thumbnail button, as well as the relevant model key:

var imageContainer = document.querySelector('.product-primary-image');
var thumbnail3D = document.querySelector('li.thumb.product-thumbnails_item:last-child');
var modelKey = 'SKU_OR_ID_HERE'; // Hard code this value, or if on a product detail page then get it using page context or template substitution

Step 2

Add an event listener to the thumbnail buttons that toggles the state of the primary image and 3D viewer:

var active_session_id;

function hideChildren(children) {
    children.forEach(function (child) {
        child.oldDisplayVal = child.style.display;
        child.style.display = 'none';
    });
}

function showChildren(children) {
    children.forEach(function (child) {
        child.style.display = child.oldDisplayVal;
    });
}

document.querySelectorAll('li.thumb.product-thumbnails_item').forEach(function (thumbnail) {
    thumbnail.addEventListener('click', function (event) {
        if (thumbnail === thumbnail3D) {
            event.preventImmediatePropogation();
            hideChildren(imageContainer.children);
            active_session_id = ocavu.launchExperience('view', {modelKey: modelKey, requestedEngine: 'webgl'}, {experienceTarget: imageContainer});
        } else if (active_session_id) {
            ocavu.endExperience(active_session_id);
        }
    });
});

Step 3

Add an event listener to restore the primary image after the 3D viewer closes:

ocavu.addEventListener('endExperience', function () {
    showChildren(imageContainer.children);
    active_session_id = null;
});

For more information:

• How do I use the Ocavu Web SDK event system?
• How do I launch an Ocavu Experience using the Web SDK?