JSFiddle - React, Tailwind, and code Playground

by Milan Gladiš

HTML

<script type="module">
  
$(window).on('load', function () {
$.getScript( "/mypath/myscript1.js" ),
    $.getScript( "/mypath/myscript2.js" ),
    
    
    $.getScript('https://www.vectary.com/viewer/v1/scripts/vctr-viewer.js',
    
    function(){
        //Called when script is loaded
    });
});
  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.2; // 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();
}
</script>