Vectary Viewer for Mobile device

This Viewer follows the phone orientation

by Milan Gladiš

HTML

<script type='module' src='https://www.vectary.com/viewer/v1/scripts/vctr-viewer.js'></script>
<vctr-viewer 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;

            var highlighted = await vctrApi.getHitObjects();
          });
      }

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

      onReady();
  }

  run();
</script>

CSS

vctr-viewer {
  height: 100vh;
  width: 100vw;
}