WebAR 3D chart

3D chart powered by Vectary WebAR.

by Milan Gladiš

HTML

<script type='module' src='https://www.vectary.com/viewer/v1/scripts/vctr-viewer.js'></script>
<vctr-viewer id="chart" model="9acd6d0b-0903-477e-9a3c-ff9a55a6df25" turntable="0" gesturehandling="superior" exposure="1.5" enableapi="1" showinteractionprompt="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 vctrApi.getObjects();
        console.log("Objects", allSceneObjects); 

        // document.body.addEventListener("click", async (event) => {
        //   console.log("Clicked Objects:", await vctrApi.getHitObjects());
        // });

        var chart1numbers = [144901, 1303019, 5177044, 2852563];
        var chart2numbers = [180000, 2400000, 5800000, 8100000];
        var chartCurrent = [1,1,1,1];

        await vctrApi.setVisibility("barExpected", true, false);
        await vctrApi.setVisibility("chart1", true, false);
        await vctrApi.setVisibility("chart2", false, false);

        let globalRotX = 0;
        let globalRotY = 0;

        const rangeTune = 0.05; // used to finetune rotation range
        
        var currentHighlighted;
        var currentActive;
        
        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();
            
            // if (highlighted.length) {
            //   console.log(highlighted[0].name);
...