JSFiddle - React, Tailwind, and code Playground

by Milan Gladiš

HTML

<style>
vctr-viewer {
  height: 100vh;
  width: 100vw;
}
</style>

<script type='module' src='https://www.vectary.com/viewer/v1/scripts/vctr-viewer.js'></script>
<vctr-viewer id="test" model="d277c76a-e004-42bc-a35c-55d614392ca7" turntable="0" gesturehandling="superior" enableapi="1" showinteractionprompt="0" zoom="0" panY="0" panX="0"></vctr-viewer>
<script type="module">

import { VctrApi } from "https://www.vectary.com/viewer-api/v1/api.js";

async function run() {    

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

    async function onReady() {
        console.log("API ready");
        try {
          
            //Example
            const allSceneObjects = await viewerApi.getObjects();
            console.log("Objects", allSceneObjects); 
            var globalRotX = 0;
            var globalRotY = 0;
            var globalRotZ = 0;
            const rangeTune = 0.5;
          
            if ( location.protocol != "https:" ) {
              location.href = "https:" + window.location.href.substring( window.location.protocol.length );
              }
              function permission () {
                  if ( typeof( DeviceOrientationEvent ) !== "undefined" && typeof( DeviceOrientationEvent.requestPermission ) === "function" ) {
                      // (optional) Do something before API request prompt.
                      DeviceOrientationEvent.requestPermission()
                          .then( response => {
                          // (optional) Do something after API prompt dismissed.
                          if ( response == "granted" ) {
                              window.addEventListener( "deviceorientation", (event) => {

                                  var absolute = event.absolute;
                                  var alpha    = event.alpha;
                                  var beta     = event.beta;
                                  var gamma    = event.gamma;

                                 ...