JSFiddle - React, Tailwind, and code Playground

by Milan Gladiš

HTML

<script type='module' src='https://www.vectary.com/viewer/v1/scripts/vctr-viewer.js'></script>
<vctr-viewer style=" height: 100%; width: 100%;" id="test" model="1987db1d-ecf5-4f1f-9c35-094b07b3b2d2" turntable="0" gesturehandling="superior" exposure="2" enableapi="1" showinteractionprompt="0" zoom="0" panY="0" panX="0" envMode="prod"></vctr-viewer>
<script type="module">
	import { VctrApi } from "https://www.vectary.com/viewer-api/v1/api.js";

  let vctrApi;
  async function run() {
      console.log("Example script running..");

      function errHandler(err) {
          console.log("API error", err);
      }

      async function onReady() {
          console.log("API ready..");

          let globalRotX = 0;
          let globalRotY = 0;

          const rangeTune = 0.5; // used to finetune rotation range

          document.addEventListener("mousemove", async e => {
              const normX = e.clientX / window.innerWidth;
              const normY = e.clientY / window.innerHeight;

              const rotX = (rangeTune * (normX - 0.5));
              const rotY = (rangeTune * (normY - 0.5));

              vctrApi.rotateView([rotX - globalRotX, rotY - globalRotY]);

              globalRotX = rotX;
              globalRotY = rotY;
          });
      }

      vctrApi = new VctrApi("test", errHandler);
      try {
          await vctrApi.init();
      } catch (e) {
          errHandler(e);
      }

      onReady();
  }

  run();
</script>

CSS

body {
  height: 100vh;
}