JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"
          />
  </head>
  <body>
    <div>
      <a data-fancybox="gallery" data-src="#example" style="">
        <img src="https://placehold.co/200x150">
      </a>

      <div id="example" class="example" style="display: none;">
        <model-viewer alt="Spacesuit"  src="https://modelviewer.dev/shared-assets/models/NeilArmstrong.glb" poster="https://modelviewer.dev/shared-assets/models/NeilArmstrong.webp" camera-controls touch-action="pan-y"></model-viewer>
      </div>
    </div>
    <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.3.0/model-viewer.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
    <script>
      Fancybox.bind('[data-fancybox]', {
        Carousel : {
          Panzoom : {
            touch : (panzoom, event) => {
              return event?.target.nodeName !== "MODEL-VIEWER"
            }
          }
        }
      });    
    </script>
  </body>
</html>