Aframe, Dynamically change the position of camera

Question

I want to navigate a 360 video with some arrows, for instance when he press the a-image left the camera will go on the left when he presses right the camera will go right etc. My code:

<a-entity position="0 1.6 0">
    <a-camera id="viewCamera" look-controls position="0 0 0">
    <a-image id="videoControls" src="#play" position="0 0 -1.5" scale="0.2 0.2 1" ></a-image>
    <a-image id="upImg" src="#up" position="0 1 -1.5" scale="0.2 0.2 1"  visible="false"></a-image>
    <a-image id="downImg" src="#down" position="0 -1 -1.5" scale="0.2 0.2 1" visible="false"></a-image>
    <a-image id="rightImg" src="#right" position="-2.1 0 -1.5" scale="0.2 0.2 1" visible="false" ></a-image>
    <a-image id="leftImg" src="#left" position="2.1 0 -1.5" scale="0.2 0.2 1" visible="false"></a-image>
    </a-camera>
</a-entity>                                

And also:

const leftImg = document.getElementById("leftImg")
    leftImg.addEventListener('click', () => {
                                               document.getElementById("viewCamera").setAttribute("position","0.001 1.85 -2.35")
                                               
                                            });

Any suggestions on changing the view of the camera? Thanks for your time!

Answer 1

I found the solution, I had to change the rotation attribute!

<a-entity  id="viewCamera"  rotation="0 0 0">
    <a-camera look-controls position="0 0 0">
    <a-image id="videoControls" src="#play" position="0 0 -1.5" scale="0.2 0.2 1" ></a-image>
    <a-image id="upImg" src="#up" position="0 1 -1.5" scale="0.2 0.2 1"  visible="false"></a-image>
    <a-image id="downImg" src="#down" position="0 -1 -1.5" scale="0.2 0.2 1" visible="false"></a-image>
    <a-image id="rightImg" src="#right" position="-2.1 0 -1.5" scale="0.2 0.2 1" visible="false" ></a-image>
    <a-image id="leftImg" src="#left" position="2.1 0 -1.5" scale="0.2 0.2 1" visible="false"></a-image>
    </a-camera>
</a-entity>

and

 const leftImg = document.getElementById("leftImg")
    leftImg.addEventListener('click', () => {
                                               const view=document.getElementById("viewCamera")
                                               view.setAttribute("rotation","0 -90 0")
                                               console.log(view.getAttribute("rotation"))
                                               
                                            });