JSFiddle - React, Tailwind, and code Playground

by Dan Schultz

HTML

<!DOCTYPE html>
<html dir="ltr" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
    />
    <title>Stencil Component Starter</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/@vertexvis/[email protected]/dist/viewer/viewer.css"
    />
    <script
      type="module"
      src="https://unpkg.com/@vertexvis/[email protected]/dist/viewer/viewer.esm.js"
    ></script> 
    <script
      nomodule
      src="https://unpkg.com/@vertexvis/[email protected]/dist/viewer.js"
    ></script> 
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
      }
      #viewer {
        width: 100%;
        height: 100%;
      }
    </style>
    <script type="module">
      window.addEventListener('DOMContentLoaded', () => {
        main();
      });
      const enginePart = 'bee2eb1d-38a2-4744-b539-2fddfc2b75f6';
      async function main() {
        const viewer = document.querySelector('#viewer');
        viewer.configEnv = "platdev"
        await viewer.load(`urn:vertexvis:stream-key:bOaXtxTCClO8MAQ4uyx6WVJsloofBm1y20_B`);
        viewer.addEventListener('tap', async event => {
          const scene = await viewer.scene();
          scene.items(op => [
            op.where(q => q.all()).hide(),
            op.where(q => q.withItemId(enginePart)).show()
          ])
          .execute();
        });
      }
    </script>
  </head>
  <body>
    <!-- <vertex-viewer id="viewer2" camera-controls="true"></vertex-viewer> -->
    <vertex-viewer id="viewer" camera-controls="true"></vertex-viewer>
  </body>
</html>