Model Viewer With Hotspot Feature

I am looking for an experienced developer to create a model viewer with a hotspot feature for my company. The model viewer should be built for web, and it should be able to display 3D models. I prefer this to be built using Google Model Viewer code which can be found here: https://modelviewer.dev/editor/ & https://github.com/google/model-viewer. The model viewer should have the hotspot feature which users can annotate the model just like the editor. The hotspots must appear on the model surface and be placed exactly where the user clicks just like the editor. They must move position with the model just like the editor. The overall look of the model editor's hotspots is what I would like to see on this project. This must also include a button to allow the user to save the updated model viewer tag with created hotspots back into the html page using the contenteditable or a similar feature. An example is the embedded code to load the model:

<model-viewer src="Astronaut.glb" shadow-intensity="1">
<div class="progress-bar hide" slot="progress-bar">
<div class="update-bar"></div>
</div>
</model-viewer>


The user then adds a hotspot, adds a label, and clicks a save button. The code saved back into the HTML page example:

<model-viewer src="Astronaut.glb" shadow-intensity="1">
<button class="Hotspot" slot="hotspot-1" data-position="-0.01895422625626393m 1.7002209312387297m 0.336956575558526m" data-normal="-0.2586151003950921m -0.19952579310771987m 0.9451495583939994m" data-visibility-attribute="visible">
<div class="HotspotAnnotation">Test Label/Hotspot</div>
</button>
<div class="progress-bar hide" slot="progress-bar">
<div class="update-bar"></div>
</div>
</model-viewer>


This code will always be embedded into a div block and styled at 100% by 100%. The buttons to add, label, remove, and save the updated html should all be included in the same embed window as the model. Preferably on the top right corner.

Thanks!