JSFiddle - React, Tailwind, and code Playground

by Milan Gladiš

HTML

<!DOCTYPE html>
<html>

<head>
    <title></title>
</head>

<body>
    <!-- <script type='module' src='https//localhost:8002/viewer/v1/scripts/vctr-viewer.js'></script> -->
    <script type='module' src='https://stage.vectary.com/viewer/v2/scripts/vctr-viewer.js'></script>
    <vctr-viewer style=" height: 100vh; width: 100vw;" id="model1" model="71430e5e-215b-42aa-b53b-52640a31091f"
        turntable="0" gesturehandling="superior" enableapi="1" showinteractionprompt="0" zoom="0" panY="0" panX="0"
        envMode="prod" loadGlb="1"></vctr-viewer>

    <script type="module">
        // import { VctrApi } from "http://localhost:8002/viewer-api/v1/api.js";
        import { VctrApi } from "https://stage.vectary.com/viewer-api/v2/api.js";
        let model1;
        async function run() {
            console.log("Example script running..");

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

            async function onReady() {
                let close = true;
                window.addEventListener("click", _e => {
                    if (close) {
                        console.log("closing");
                        model1.play(0, 1); // animIdx, timeScale
                    }
                    else {
                        console.log("opening");
                        model1.play(0, -1); // -1 for reverse
                    }
                    close = !close;
                });
            }

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

            onReady();
        }

        run();
    </script>

</body>

</html>