// 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; }