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="968eaaf2-92fc-4a2e-9b86-ae9d3ecb8c42" 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("deviceorientation", async e => {
              var absolute = event.absolute;
              var alpha    = event.alpha;
              var beta     = event.beta;
              var gamma    = event.gamma;

			console.log('tst');
      
              const normX = alpha / window.innerWidth;
              const normY = beta / 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

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