Google 模型查看器变体下拉列表转换

Question

我正在尝试为我工作的公司创建一个产品配置器，到目前为止，我有 Google 的模型查看器来做我想做的事情！我可以更改产品的大小和颜色，但是，我想将变体选择器的“下拉列表”更改为“网格”，以使其更像按钮而不是下拉列表。因为我现在只有大约一个月的时间在 HTML、CSS 和 JS 工作，所以我不确定该怎么做。我有每个颜色样本的图像，我想用它们来填充选项。

我也尝试过使用 DDSlick Jquery 来充当包含图像（用于样本颜色）的下拉列表，但我也不知道如何让它工作。

如有任何帮助，我们将不胜感激！

<div>
  Choose a Color:
  <select id="variant"></select>
</div>

<script>
  const modelViewerVariants = document.querySelector("model-viewer#MalloryChest36");
  const select = document.querySelector('#variant');
  modelViewerVariants.addEventListener('load', () => {
    const names = modelViewerVariants.availableVariants;
    for (const name of names) {
      const option = document.createElement('option');
      option.value = name;
      option.textContent = name;
      select.appendChild(option);
    }
  });
  select.addEventListener('input', (event) => {
    modelViewerVariants.variantName = event.target.value;
  });
</script>

Answer 1

经过反复试验，终于成功了！

<div class="colors">
   <div id="variant">
   Choose a Color:
   </div>
</div>

<!-- Size Script -->
<script type="module">
  const modelViewer = document.querySelector("model-viewer"); window.switchSrc = (element, name) => { const base = "../Assets/Models/" + name; modelViewer.src = base + '.glb'; const size = document.querySelectorAll(".size"); size.forEach((element) => {element.classList.remove("selected");
  var colors = document.getElementById("variant"); var colorButton = colors.firstChild; while( colorButton ) { colors.removeChild( colorButton ); colorButton = colors.firstChild; }}); element.classList.add("selected"); }; document.querySelector(".sizebuttons").addEventListener('beforexrselect',
  (ev) => { ev.preventDefault(); });
</script>

<!-- Color Script -->
<script type="module">
  const modelViewerVariants = document.querySelector("model-viewer"); const select = document.querySelector('#variant'); modelViewerVariants.addEventListener('load', () => { const names = modelViewerVariants.availableVariants; for (const name of names)
  { const color = document.createElement('button'); color.value = name; color.textContent = name; select.appendChild(color); } }); document.getElementById('variant').addEventListener('click', (event) => { modelViewerVariants.variantName = event.target.value;
  });
</script>

如果其他人需要参考这个，我会留下来。（我根本不是程序员，所以我相信可以有更简单或更快捷的方法来做到这一点）

Google 模型查看器变体下拉列表转换

Google Model Viewer Variant Dropdown List Conversion

html

javascript

css

model-viewer