How do I rotate an x3d web object using jS?

Question

I'm trying to achieve something like this answer to another post, however I have one major difference which is that I'm not using three.js, instead I'm using an x3d object. I want to capture the scroll position and use it to rotate a 3d object diagonally (from current position, towards the bottom left).

This is the jS:

window.addEventListener("wheel", onMouseWheel);

function onMouseWheel(event){
    camera.position.y += event.deltaY * 5; // obviously 'camera' isn't defined as it's not three.js, can I maybe replace this?
    camera.position.x += event.deltaX * 10;
}

This is the x3d object:

https://pastiebin.com/5fc174a09dc15

(A lot of coordinates in there so had to paste it externally.)

I can control the object zoom by scrolling over the object and I can grab and rotate the object using the cursor, I just need to know how to connect the rotation to jS when the object is an x3d object and not a three.js one, any help would be greatly appreciated.

Answer 1

First I'm no pro and I'm in touch with it since only a few hours ago, but:

find this viewpoint tab and give it an id like id="mycam"

<viewpoint id='mycam' DEF='CA_Camera' position='-0 -0 0' fieldOfView='0.691'></viewpoint>

then you can add this code into "body", right under the </x3d> tab:

    <div style="background-color:blue;color:white;width:50px;height:50px;position:absolute;left:-4px;top:-4px;" onclick="down()">Q</div>
    <div style="background-color:blue;color:white;width:50px;height:50px;position:absolute;left:104px;top:-4px;" onclick="up()">E</div>
    <div style="background-color:blue;color:white;width:50px;height:50px;position:absolute;left:50px;top:0px;" onclick="forward()">W</div>
    <div style="background-color:blue;color:white;width:50px;height:50px;position:absolute;left:0px;top:50px;" onclick="left()">A</div>
    <div style="background-color:blue;color:white;width:50px;height:50px;position:absolute;left:50px;top:50px;" onclick="backward()">S</div>
    <div style="background-color:blue;color:white;width:50px;height:50px;position:absolute;left:100px;top:50px;" onclick="right()">D</div>
<script>
    var cam_x=0,cam_y=0,cam_z=0;
    function forward(){cam_z=cam_z-0.5;mycam.position= cam_x+" "+cam_y+" "+cam_z;}
    function backward(){cam_z=cam_z+0.5;mycam.position= cam_x+" "+cam_y+" "+cam_z;}
    function left(){cam_x=cam_x-0.5;mycam.position= cam_x+" "+cam_y+" "+cam_z;}
    function right(){cam_x=cam_x+0.5;mycam.position= cam_x+" "+cam_y+" "+cam_z;}
    function up(){cam_y=cam_y+0.5;mycam.position= cam_x+" "+cam_y+" "+cam_z;}
    function down(){cam_y=cam_y-0.5;mycam.position= cam_x+" "+cam_y+" "+cam_z;}
</script>

You can see that when you call the given id, you can change its properties like mycam.position="0 0 0";.

And it has to be in this vector format like "0 0 0".