JSFiddle - React, Tailwind, and code Playground

by Milan Gladiš

HTML

<style>
body {
  background-color: #000;
}

footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  display: flex;
  justify-content: center;
  z-index: 10;
}

.importButton {
  margin-bottom: 20px;
  display: inline-block;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.5);
  padding: 10px 20px;
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  pointer-events: auto;
  cursor: pointer;
  transition: all 0.3s ease;
}

.importButton:hover {
  background-color: #fff;
  color: #000;
  box-shadow: 0 0 0 rgba(255,255,255,0);
}

.importButton input, img {
  display: none;
}
</style>


<footer>
  <label class="importButton" for="imageLoader">
    Import your logo...
    <input type="file" id="imageLoader" name="imageLoader"/><br>
  </label>
  <img style="" id="defaultImage" src=""><br>
  <img style="" id="image" src=""><br>
  <canvas id="imageCanvas" style="display: none"></canvas>
</footer>

<script type='module' src='https://www.vectary.com/viewer/v2/scripts/vctr-viewer.js'></script>
<vctr-viewer id="test" model="71430e5e-215b-42aa-b53b-52640a31091f" loadglb="1" env="none" turntable="0" gesturehandling="superior" exposure="2" enableapi="1" showinteractionprompt="0" zoom="0" panY="0" panX="0" rotateX="0" rotateY="0" envMode="prod"></vctr-viewer>
<script type="module">
	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.5; // used to finetune rotation range

					const myMaterialProps = await vctrApi.getMaterialProperties("Logo");
          console.log("Material properties: ", myMaterialProps);
	
          //vctrApi.updateMaterial("Logo", {
          //  "emissiveMap":...