1

我目前正在开发一个 Shopify 网站，其中包含动画 3D 模型，效果非常好，但动画变得非常重复。我试图创建一个可以切换暂停/播放动画的按钮，但我做不到。Shopify 分发 modelviewer.dev技术。我遵循了他们的文档，但没有运气。你可以帮帮我吗？

带有 3D 模型动画的页面示例： https ://sportstraining.pt/collections/soccer/products/wheeled-board-soccer

模型查看器文档： https ://modelviewer.dev/docs/index.html#entrydocs-animation-properties-paused

JS代码

    $(".animation-pause").click(function() {
    if ($(this).parent().attr("paused") == 'undefined' && $(this).parent().attr("paused") == false) { 
      $(this).parent().play();
      $(this).text("PLAY");
    }
    else {
      $(this).parent().pause();
      $(this).text("PAUSE");
    }
  });

  $('model-viewer').each(function(i) {
    $(this).append('<div class="animation-pause">PAUSE</div>');
    $(this).append('<button class="animation-pause" slot="hotspot-one" data-position="..." data-normal="...">PAUSE</button>');
  });

  var modelViewer = document.querySelector(selector);
  var playRequest = document.querySelector("#overlay");

  sound.addEventListener("pause", () => {
     modelViewer.pause();
  });

  sound.addEventListener("play", () => {
    modelViewer.play();
    playRequest.classList.add("hide");
  });

  function hotspotButtonc {
    if (modelViewer.paused) {
      modelViewer.play();
    } 
    else {
      modelViewer.pause();
    }
  });
4

0 回答 0