Edit in JSFiddle

// Initialize embed api
const p3d = new P3dEmbedApi(document.getElementById('p3d-embed'), {
    onhover: onhover,
    onclick: onclick,
});
// Don't reset camera on double click if user is clicking on the model
p3d.setAllowCameraReset('if-outside');
// Disable camera re-centering behavior
p3d.setAllowCameraRecenter(false);
// Store list of all materials for future reference
let materials = [];
p3d.listMaterials().then((mats) => {
    materials = mats;
});
// Collect variants per each part type
let activeBelt = 0;
let beltVariants = [];
let activeBuckle = 0;
let buckleVariants = [];
p3d.listVariants().then((variantSets) => {
    variantSets.forEach((set) => {
        if (set.name.includes('Belt')) {
            beltVariants = set.variants;
        }
        else {
            buckleVariants = set.variants;
        }
    });
});
// Highlight the material that was hovered over if any
function onhover(hover) {
    materials.forEach((material) => {
        material.highlight = hover.material === material ? 1.0 : 0.0;
    });
}
// Toggle active variant for the clicked part
function onclick(click) {
    if (click.status !== 'hit') {
        return;
    }
    // Select next variant
    if (click.material.name === 'Belt') {
        activeBelt = activeBelt < beltVariants.length - 1 ? activeBelt + 1 : 0;
        beltVariants[activeBelt].select();
    }
    else {
        activeBuckle = activeBuckle < buckleVariants.length - 1 ? activeBuckle + 1 : 0;
        buckleVariants[activeBuckle].select();
    }
}

<script src="https://cfstatic.p3d.in/embed-api/v2/p3d-embed-api.js"></script>

<iframe src="https://p3d.in/e/7EZcM+controls,border,variants,link-hidden+api" frameborder="0" height="600" width="800" allowtransparency="true" id="p3d-embed"></iframe>
<div class="info-box-container">
    <span class="info-box">
        Click on the belt or buckle to switch between variants!
    </span>
</div>

#p3d-embed {
  position: absolute;
  height: 98%;
  width: 98%;
  border: none;
  margin: 0px;
  padding: 0px;
}

.info-box-container {
  position: absolute;
  top: 1em;
  left: 0;
  height: auto;
  width: 100%;
  z-index: 500;
  user-select: none;
}

.info-box {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  background: rgba(0,0,0,.4);
  border-radius: .25rem;
  font-size: 1.0rem;
  color: #fff;
  padding: .25rem .5rem;
  text-align: center;
  white-space: nowrap;
}