Edit in JSFiddle

// Initialize embed api
const p3d = new P3dEmbedApi(document.getElementById('p3d-embed'));
p3d.listVariants().then((variantSets) => {
    document.getElementById('container').style.display = 'block';
    document.getElementById('loading').style.opacity = '0.0';
    document.getElementById('loading').style.visibility = 'hidden';
    // Display a set in the UI by index
    const displaySet = (setIndex) => {
        for (let i = 0; i < variantSets.length; i++) {
            const isActive = i === setIndex;
            // Only display options for the selected set
            const setOptions = document.getElementById(`variantset-${i}`);
            setOptions.style.display = isActive ? 'flex' : 'none';
            // Mark button active
            const setButton = document.getElementById(`variantset-${i}-button`);
            if (isActive) {
                setButton.classList.add('active');
            }
            else {
                setButton.classList.remove('active');
            }
        }
    };
    // Initially display first set
    displaySet(0);
    variantSets.forEach((variantSet, setIndex) => {
        const setButton = document.getElementById(`variantset-${setIndex}-button`);
        setButton.onclick = () => {
            displaySet(setIndex);
        };
        variantSet.variants.forEach((variant, variantIndex) => {
            const variantButton = document.getElementById(`variant-${setIndex}-button-${variantIndex}`);
            variantButton.onclick = function () {
                variant.select();
            };
        });
    });
});
// Add spin toggle button
const spinToggle = document.getElementById('spin-toggle');
function toggleSpin() {
    p3d.getSpin().then((didSpin) => {
        const newSpin = !didSpin;
        if (newSpin) {
            spinToggle.classList.add('active');
        }
        else {
            spinToggle.classList.remove('active');
        }
        p3d.setSpin(newSpin);
    });
}
spinToggle.onclick = toggleSpin;
// Spin by default
toggleSpin();

<script src="https://cfstatic.p3d.in/embed-api/v2/p3d-embed-api.js"></script>
<div id="loading">
    <div class="loading-content">
        <div class="spinner-dual-ring"></div> Loading...
    </div>
</div>
<div class="container" style="display:none;" id="container">
    <iframe src="https://p3d.in/e/rFdjp+api+load+controls,variants,hotspots-hidden+bg-222222ff" border="0" frameborder="0" height="80%" width="90%" allowtransparency="true" id="p3d-embed"></iframe>
    <div class="variant-set-container">

        <div id="controls" class="controls">
            <b class="controls-label" display="block">Product Options ></b>
            <div class="variant-set">
                <button class="button set-button" id="variantset-0-button">Models</button>
            </div>
            <div class="variant-set">
                <button class="button set-button" id="variantset-1-button">Wood</button>
            </div>

            <div id="spin-toggle">
                <button class="button spin-toggle">&#8635;</button>
            </div>
        </div>

        <div id="variantset-0" class="variantholder">
            <button class="button variant-button" id="variant-0-button-0"><img src="https://cfstatic.p3d.in/embed-api/img/Small-ABLENOOK-Unit.png" class="model-image"> <br/><label class="option-label">3 Bay</label> </button>
            <button class="button variant-button" id="variant-0-button-1"><img src="https://cfstatic.p3d.in/embed-api/img/Large-ABLENOOK-Unit.png" class="model-image"> <br/><label class="option-label">6 Bay</label></button>
        </div>
        <div id="variantset-1" class="variantholder">
            <button class="button variant-button" id="variant-1-button-0"><img src="https://cfstatic.p3d.in/embed-api/img/Oak-Wood-Texture.png" class="material-image"><br/> <label class="option-label">Oak</label></button>
            <button class="button variant-button" id="variant-1-button-1"><img src="https://cfstatic.p3d.in/embed-api/img/Hardwood-Texture.png" class="material-image"> <br/><label class="option-label">Hardwood</label></button>
            <button class="button variant-button" id="variant-1-button-2"><img src="https://cfstatic.p3d.in/embed-api/img/Birch-Wood-Texture.png" class="material-image"> <br/><label class="option-label">Birch</label></button>
        </div>
    </div>
</div>

.button {
  color: white;
  text-align: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: auto 0.25em;
  background-color: rgba(116, 116, 116, 0);
  border: none;
}

.variant-button {
  font-size: 180%;
  padding: 0.1em;
  margin: auto 0.1em;
  background-color: rgba(116, 116, 116, 0);
  width: 18%;
  height: 78%;
}

.variant-button:hover {
  transform: scale(1.15);
  transition-duration: 0.2s;
}

.set-button {
  font-size: 140%;
  margin: auto;
  background-color: rgb(155, 155, 155);
  width: 100%;
  height: 100%;
  min-height: 1.5em;
}

.set-button:hover, .set-button.active {
  transform: translate3d(0px, -3px, 0px);
  background-color: rgb(128, 128, 128);
  animation-timing-function: ease-out;
  transition-duration: 0.3s;
}

.set-button.active {
  font-weight: bold;
}

#spin-toggle {
  margin-left: auto;
  background-color: rgb(155, 155, 155);
  transition-duration: 0.25s;
}
#spin-toggle.active {
  background-color: rgb(128, 128, 128);
}#spin-toggle:hover {
  background-color: rgb(100, 100, 100);
}

.spin-toggle {
  font-size: 200%;
  font-weight: bold;
}

.container {
  position: absolute;
  width: 98%;
  height: 98%;
  margin: auto;
}

.controls {
  display: flex;
  width: 100%;
  height: 25%;
  min-height: 2em;
  background-color: rgb(197, 197, 197);
}

.controls-label {
  color: rgb(0, 0, 0);
  text-align: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 140%;
  padding-left: 0.2em;
  margin: auto 0.25em;
  width: auto;
  height: 50%;
}

.variant-set {
  padding-left: 1.5%;
  height: 75%;
  margin: auto 0;
}

.variant-set-container {
  background-color: lightgray;
  width: 90%;
  height: 40%;
  margin: auto;
}

.variantholder {
  display: flex;
  justify-content: center;
  justify-items: center;
  height: 40%;
  width: 100%;
}

.option-label {
  width: 100%;
  height: 10%;
  margin: auto -0.25em;
  color: black;
  font-size: 65%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.model-image {
  width: auto;
  height: auto;
  max-height: 75%;
}

.material-image {
  width: auto;
  height: auto;
  max-height: 75%;
  border-radius: 15%;
}

iframe {
  display: block;
  margin: auto;
  height: 60%;
}

#loading {
  position:absolute;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  background-color: rgb(197, 197, 197);
  color: white;
  font-size: xx-large;
  z-index: 10;

  visibility: visible;
  opacity: 1;
  transition: .5s ease-out
}

.loading-content {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}

.spinner-dual-ring {
  margin: auto;
  width: 80px;
  height: 80px;
}
.spinner-dual-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: spinner-dual-ring 1.2s linear infinite;
}
@keyframes spinner-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}