Vectary 3D Web AR

Share 3D content on the web with Vectary 3D/AR Viewer

by Milan Gladiš

HTML

<script type='module' src='https://www.vectary.com/viewer/v1/scripts/vctr-viewer.js'></script>
<vctr-viewer id="chart" model="30f6a6fa-6d75-43e2-bd16-34621b971885" turntable="0" gesturehandling="superior" exposure="1" 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); 
        
        
        var chart1numbers = [144901, 1303019, 5177044, 2852563];
        var chart2numbers = [180000, 2400000, 5800000, 8100000];
        var chartCurrent = [1,1,1,1];

        vctrApi.setVisibility("barExpected", true, false);


		function scaleBars(value, i, array) {
			var value = value/1000000;

			// console.log(`bar${i}` + ' = ' + value)
	        function animation() {
	          VctrApi.Utils.animate(
	            300,
	            "easeOutQuad",
	            (timeFraction) => {
	              var scale = VctrApi.Utils.lerp([1,1,chartCurrent[i]], [1, 1, value], timeFraction);
	              vctrApi.setScaleAbsolute(`bar${i+1}`, scale);
	            }
	          );
	        }
	        animation();
	        setTimeout(function() {
				chartCurrent[i] = value;
	        }, 301);
		}

		function scaleExpectedBar(from, to, time) {
			var value = to;
			vctrApi.setVisibility("barExpected", true, false);
			function animation() {
	          VctrApi.Utils.animate(
	            time,
	            "easeOutQuad",
	            (timeFraction) => {
	              var scale = VctrApi.Utils.lerp([1.06,1.06,from], [1.06, 1.06, value], timeFraction);
	              console.log(scale);
	              vctrApi.setScaleAbsolute("barExpected", scale);
	            }
	          );
	       ...

CSS

:root {
  --hue-range-color: #A36B80;
}

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  font-family: "Roboto";
  display: flex;
  flex-direction: column;
}

vctr-viewer {
  flex: 1;
}

h1 {
  display: block;
  text-align: center;
  color: #fff;
}

#hue-color {
  position: absolute;
  left: 85%;
  margin-top: -3px;
  display: block;
  background: #A36B80;
  background: var(--hue-range-color);
  width: 22px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(255, 255, 255,0.4);
  pointer-events: none;
}

#hue-color span {
  display: block;
  width: 2px;
  height: 12px;
  border-radius: 2px;
  background-color: rgba(255, 255, 255,0.4);
}

#hue {
  width: 100%;
  height: 30px;
  border-radius: 2px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  margin: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
}

#hue::-webkit-slider-thumb {
  opacity: 0;
}

#hue::-moz-range-thumb {
  opacity: 0;
}

#hue::-ms-thumb {
  opacity: 0;
}

#hue::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;  
  border-radius: 10px;
  background: -moz-linear-gradient(left, rgba(255,0,0,0.3) 0%, rgba(255,255,0,0.3) 16.66666666666667%, rgba(0,255,0,0.3) 33.33%, rgba(0,255,254,0.3) 50%, rgba(0,0,255,0.3) 66.66666666666667%, rgba(254,0,255,0.3) 83.33333333333333%, rgba(255,0,0,0.3) 100%), rgba(155,155,155,0.7); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,0,0,0.3)), color-stop(16.66666666666667%,rgba(255,255,0,0.3)), color-stop(33.33%,rgba(0,255,0,0.3)), color-stop(50%,rgba(0,255,254,0.3)), color-stop(66.66666666666667%,rgba(0,0,255,0.3)), color-stop(83.33333333333333%,rgba(254,0,255,0.3)), color-stop(100%,rgba(255,0,0,0.3))), rgba(155,155,155,0.7); /* Chrome,Safari4+ */
  background:...