首页 > 解决方案 > 我只想在模型查看器中播放带有音频的动画

问题描述

我想在模型查看器中增强动画 3d 模型,其中动画应该与音频同步播放。我有实现,但增强表面指向和与不同浏览器(Android 和 iOs)的音频同步存在一些问题。故障编辑器

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>&lt;model-viewer&gt; example</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    

    <!-- The following libraries and polyfills are recommended to maximize browser support -->
    <!-- NOTE: you must adjust the paths as appropriate for your project -->

    <!--  REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
    <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>

    <!--  OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->
    <script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>

    <!--  OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->
    <script src="https://unpkg.com/resize-observer-polyfill@1.5.0/dist/ResizeObserver.js"></script>

    <!--  OPTIONAL: Fullscreen polyfill is required for experimental AR features in Canary -->
    <!--<script src="https://unpkg.com/fullscreen-polyfill@1.0.2/dist/fullscreen.polyfill.js"></script>-->

    <!--  OPTIONAL: Include prismatic.js for Magic Leap support -->
    <script src="https://unpkg.com/@magicleap/prismatic/prismatic.min.js"></script>
    
    
  </head>
  <body>
  
      <!-- pfc sync between audio time and model-viewer animation time -->
    <script>
      function Sync(selector, audioSelector) {
        var checkExist = setInterval(function() {
          if (document.querySelector(selector) != null) {
            var modelViewer = document.querySelector(selector);
            var sound = document.querySelector(audioSelector);

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

            
            var promise = sound.play();
            if (promise !== undefined) {
              promise
                .then(_ => {
                  // Autoplay started!
                })
                .catch(error => {
                  // Autoplay was prevented.
                  // Show a "Play" button so that user can start playback.
                });
            }
            
            
            clearInterval(checkExist);
          }
        }, 1000);
      }
    </script>  
  <!-- 
  Penguin + Train Sound = ok
  "https://cdn.glitch.com/7d7e8236-5fa5-4809-ab74-eb6bf2bef1c6%2Fmodel.glb?sound=https://cdn.glitch.com/99537520-86ee-43b2-9c9a-4e6b399f9e42%2FSteamTrain.ogg&link=https://prefrontalcortex.de"

  Train + Train sound = kein Sound
"https://cdn.glitch.com/99537520-86ee-43b2-9c9a-4e6b399f9e42%2FTrain-br111.glb?sound=https://cdn.glitch.com/99537520-86ee-43b2-9c9a-4e6b399f9e42%2FSteamTrain.ogg&link=https://prefrontalcortex.de"
   --> 
    
  <model-viewer
        src="https://cdn.glitch.com/7fa75de4-559e-4a0e-9d57-bbfce6666947%2FTrainAnimated-Blender-3.glb?sound=https://cdn.glitch.com/99537520-86ee-43b2-9c9a-4e6b399f9e42%2FSteamTrain.ogg&link=https://google.com"
        ios-src="https://cdn.glitch.com/7fa75de4-559e-4a0e-9d57-bbfce6666947%2FTrain-br111-fixedTangents.usdz?sound=https://cdn.glitch.com/7fa75de4-559e-4a0e-9d57-bbfce6666947%2FSteamTrain.mp3&link=https://google.com"
        ar
        background-color="#fffff"
        alt="BR 111"
        exposure="1"
        shadow-intensity="1"
        camera-controls
        auto-rotate
        autoplay
        quick-look-browsers="safari chrome"
        id="modelviewer"
        style="position:absolute; left:0; top:0; margin:0; padding:0; width:100%; height:100%;"
      >
  </model-viewer>

  <section class="attribution">
  <span>
        <span><audio controls autoplay loop id="sound">
              <source src="https://cdn.glitch.com/99537520-86ee-43b2-9c9a-4e6b399f9e42%2FSteamTrain.ogg" type="audio/ogg">
              <source src="https://cdn.glitch.com/7fa75de4-559e-4a0e-9d57-bbfce6666947%2FSteamTrain.mp3" type="audio/mp3">  
          </audio></span>
      </span>
    </section> 
    
    <script>
        Sync("#modelviewer", "#sound");
    </script>  
    
    <!--  Include both scripts below to support all browsers! -->
    <!-- Import the component -->
    <script
      type="module"
      src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"
    ></script>
    <script
      nomodule
      src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"
    ></script>
  </body>
</html>

谁能帮我解决这个问题。音频与动画模型不正确同步。模型渲染也有一些问题。预先感谢

标签: javascriptwebaugmented-realitywebxrmodel-viewer

解决方案


您的模型和声音的持续时间不相等。

您的模型持续时间是8.333333015441895但您的声音持续时间是47.827732。而且我认为没有必要使用 setInterval。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>&lt;model-viewer&gt; example</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- The following libraries and polyfills are recommended to maximize browser support -->
    <!-- NOTE: you must adjust the paths as appropriate for your project -->

    <!--  REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
    <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>

    <!--  OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->
    <script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>

    <!--  OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->
    <script src="https://unpkg.com/resize-observer-polyfill@1.5.0/dist/ResizeObserver.js"></script>

    <!--  OPTIONAL: Fullscreen polyfill is required for experimental AR features in Canary -->
    <!--<script src="https://unpkg.com/fullscreen-polyfill@1.0.2/dist/fullscreen.polyfill.js"></script>-->

    <!--  OPTIONAL: Include prismatic.js for Magic Leap support -->
    <script src="https://unpkg.com/@magicleap/prismatic/prismatic.min.js"></script>
  </head>
  <body>
    <!-- pfc sync between audio time and model-viewer animation time -->
    <script>
      function Sync(selector, audioSelector) {
        var sound = document.querySelector(audioSelector);
        var modelViewer = document.querySelector(selector);
        if (modelViewer && sound) {
          sound.addEventListener("timeupdate", () => {
            if (sound.currentTime > modelViewer.duration) {
              // restart both model and sound
              modelViewer.currentTime = 0;
              sound.currentTime = 0;
            } else {
              modelViewer.currentTime = sound.currentTime;
            }
          });
        }

        // I commented these two because currentTime=0 doesn't affect those.
        modelViewer.setAttribute("camera-controls", true);
        modelViewer.setAttribute("auto-rotate", true);
        modelViewer.setAttribute("autoplay", true);
        sound.play();
        modelViewer.play();
      }
    </script>
    <!-- 
  Penguin + Train Sound = ok
  "https://cdn.glitch.com/7d7e8236-5fa5-4809-ab74-eb6bf2bef1c6%2Fmodel.glb?sound=https://cdn.glitch.com/99537520-86ee-43b2-9c9a-4e6b399f9e42%2FSteamTrain.ogg&link=https://prefrontalcortex.de"

  Train + Train sound = kein Sound
"https://cdn.glitch.com/99537520-86ee-43b2-9c9a-4e6b399f9e42%2FTrain-br111.glb?sound=https://cdn.glitch.com/99537520-86ee-43b2-9c9a-4e6b399f9e42%2FSteamTrain.ogg&link=https://prefrontalcortex.de"
   -->

    <model-viewer
      src="https://cdn.glitch.com/7fa75de4-559e-4a0e-9d57-bbfce6666947%2FTrainAnimated-Blender-3.glb?sound=https://cdn.glitch.com/99537520-86ee-43b2-9c9a-4e6b399f9e42%2FSteamTrain.ogg&link=https://google.com"
      ios-src="https://cdn.glitch.com/7fa75de4-559e-4a0e-9d57-bbfce6666947%2FTrain-br111-fixedTangents.usdz?sound=https://cdn.glitch.com/7fa75de4-559e-4a0e-9d57-bbfce6666947%2FSteamTrain.mp3&link=https://google.com"
      ar
      background-color="#fffff"
      alt="BR 111"
      exposure="1"
      shadow-intensity="1"
      quick-look-browsers="safari chrome"
      id="modelviewer"
      style="
        position: absolute;
        left: 0;
        top: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      "
    >
    </model-viewer>

    <section class="attribution">
      <span>
        <span
          ><audio controls loop id="sound">
            <source
              src="https://cdn.glitch.com/99537520-86ee-43b2-9c9a-4e6b399f9e42%2FSteamTrain.ogg"
              type="audio/ogg"
            />
            <source
              src="https://cdn.glitch.com/7fa75de4-559e-4a0e-9d57-bbfce6666947%2FSteamTrain.mp3"
              type="audio/mp3"
            /></audio
        ></span>
      </span>
    </section>

    <script>
      Sync("#modelviewer", "#sound");
    </script>

    <!--  Include both scripts below to support all browsers! -->
    <!-- Import the component -->
    <script
      type="module"
      src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"
    ></script>
    <script
      nomodule
      src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"
    ></script>
  </body>
</html>


推荐阅读