JSFiddle - React, Tailwind, and code Playground

by Milan Gladiš

HTML

<script type='module' src='https://www.vectary.com/viewer/v1/scripts/vctr-viewer.js'></script>
<vctr-viewer id="test" model="7bb7797f-47e0-438d-bdfc-5cf0dc89964d" turntable="0" gesturehandling="superior" enableapi="1" showinteractionprompt="1" envMode="prod"></vctr-viewer>
<script type="module">
	import { VctrApi } from "https://www.vectary.com/viewer-api/v1/api.js";

  let vctrApi;
  
  
let annotationSwitch = true;
let highlightState = false;

const annotations = [
    {
        label: "1",
        name: "Rocket",
        text: "The spaceship flying around the space base",
        objectName: "handlebar"
    },
    {
        label: "2",
        name: "Asteroid",
        text: "253 Mathilde",
        objectName: "Asteroid_Large"
    },
    {
        label: "3",
        name: "Space Base",
        text: "Advance asteroid mining space base",
        objectName: "Tower"
    },
    {
        label: "4",
        name: "Transmitter",
        text: "Energy transmitter",
        objectName: "Ring_2"
    },
    {
        label: "5",
        name: "Antenna",
        text: "Radio wave antenna",
        objectName: "Antenna"
    }
];

let annotationsIds = [];

function addAnotations() {
    annotations.forEach(async annotation => {
        const currentAnnotation = await vctrApi.addAnnotation(annotation);
        annotationsIds.push(currentAnnotation.id);
    })
}

function addListeners() {
    rocketBtn.addEventListener("click", async _event => {
        if (!highlightState && annotationSwitch) {
            await vctrApi.highlightMeshesByName(["Rocket"], "#fcba03", 0.8, false);
            await vctrApi.expandAnnotationsById(annotationsIds[0], true, true);
            highlightState = true;
        } else {
            await vctrApi.unhighlightMeshesByName(["Rocket"]);
            await vctrApi.expandAnnotationsById(annotationsIds[0], false, false);
            highlightState = false;
        }
    });

    hideBtn.addEventListener("click", async _event => {
       ...

CSS

vctr-viewer {
  width: 100vw;
  height: 100vh;
}

.cam {
  /* position: absolute; */
}