'model-viewer and cursor moverment

I am using model-viewer for a 3D-Model and I want to move the 3D-Model according to cursor movement. I am not sure how I can connect the HTML variable in attribute "camera-controls" so that I can change them in js. So far I have written this in HTML:

<div class="hero">
 <model-viewer src="{% static "images/file_name.glb" %}" alt="3d model"
        loading="eager" camera-controls disable-zoom 
        reveal="auto" auto-rotate rotation-per-second="60deg"
        id="model">
 </model-viewer>
</div>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source