How to rotate two diffrent X3D scenes at the same time and on the same mouse event?

Question

do i need some java script or jQuery for this ? I'm just asking because i need something like this http://examples.x3dom.org/cadViewer/slimViewerConrod/index.html. As you can see you can rotate the main object (main scene) with the axes(helper scene) together with the same mouse event. I'm relative new to X3DOM and i just wanted to ask because i have no clue how it works. If it helps, my X3D scenes are :

<X3D id="x3dElement">
                <Scene id='scene'>              
        <Viewpoint id="part7" position=" 0.028793486820279934 0.06097637432245687 -0.009845212995355457" description="camera"></Viewpoint>
            <Group id='alles' children='gr1 gr2 gr3' render='true'>
                <Group id='gr1' children='gr2 gr3' render='true'>
                    <transform translation='0 0 0' rotation='0 0 0 0'>
                            <Inline nameSpaceName="case" mapDEFToID="true" url="case1.x3d"/>
                    </transform>        
                    <transform translation='0 0.02 0.031' Rotation='0.86603 0 0 0'>
                    <transform Rotation='0 0 0 0'>
                        <Inline nameSpaceName="switch" mapDEFToID="true" url="switch1.x3d"/>
                        <Inline id="b_sauele" nameSpaceName="inline" mapDEFToID="true" url="inlineSrc/bSauele/bolt1.x3d" onload="init()" ></Inline>                                 
                    </transform>
                    </transform>
                    <transform translation='-0.03 -0.0155 0.024' rotation='0 1 0 1.5708'>
                    <transform rotation='1 0 0 3.1416'>
                            <Inline nameSpaceName="socket" mapDEFToID="true" url="socket2.x3d"/>
                    </transform>
                    </transform>
                    <transform translation='-0.03 -0.0155 -0.024' rotation='1 0 0 3.1416'>
                    <transform rotation='0 1 0 1.5708'>
                            <Inline nameSpaceName="socket" mapDEFToID="true" url="socket2.x3d"/>
                    </transform>
                    </transform>
                    <transform translation='0.03 -0.0155 -0.024' rotation='1 0 0 3.1416'>
                    <transform rotation='0 1 0 1.5708'>
                            <Inline nameSpaceName="socket" mapDEFToID="true" url="socket2.x3d"/>
                    </transform>
                    </transform>
                    <transform translation='0.03 -0.0155 0.024' rotation='1 0 0 3.1416'>
                    <transform rotation='0 1 0 1.5708'>
                            <Inline nameSpaceName="socket" mapDEFToID="true" url="socket2.x3d"/>
                    </transform>
                    </transform>
                    </Group>
                    <Group id='gr2' children='gr3' render='true'>
                        <transform translation='0 -0.018 -0.01988' Rotation='0 0 0 0'>
                                <Inline nameSpaceName="head" mapDEFToID="true" url="head1.x3d"/>
                        </transform>
                            </Group>
                        <Group id='gr3' render='true'>
                                <transform translation='0 -0.05 -0.0275' Rotation='0 0 0 0'>
                                    <Inline nameSpaceName="shaft" mapDEFToID="true" url="shaft2.x3d"/>
                                </transform>
                                <transform translation='0.0129 0.0129 -0.009' Rotation='0 1 0 3.1416'>
                                    <Inline nameSpaceName="bolt" mapDEFToID="true" url="bolt1.x3d"/>    
                                </transform>
                                <transform translation='-0.0129 0.0129 0.009' Rotation='0 1 0 3.1416'>
                                    <Inline nameSpaceName="bolt" mapDEFToID="true" url="bolt1.x3d"/>
                                </transform>                            
                </Group>                    
            </Group>                
                </Scene>
                </x3d>              
                 <X3D id='CoordinateAxes' showStat='false' showLog='false'>
            <scene id="helper_scene">
                <viewpoint id="coordinateAxesViewpoint" centerOfRotation='0 0 0' position='0 0 3'></viewpoint>
                <Inline mapDEFToID="true" nameSpaceName="CoordinateAxes" url="data/CoordinateAxes.x3d"></Inline>
            </scene>
        </X3D>'>

Answer 1

There doesn't seem to be a way to sync two viewpoints without using Javascript. You shouldn't need to use jQuery - just add a handler that listens for the viewpointChanged event on your main viewpoint tag and then updates the axes viewpoint to match:

let part7VP = document.getElementById("part7");
let axesVP = document.getElementById("coordinateAxesViewpoint");

part7VP.onviewpointChanged = function(event) {
  axesVP.orientation = event.orientation;
  axesVP.position = event.position;
}

This continuously updates the axis viewpoint to match the main viewpoint. Note that if you also want the reverse (ie, to always update the main viewpoint to match the axes viewpoint), you'll need to add a second event handler.

Here's a MWE: https://codepen.io/jburkhart/pen/abgbYMJ?editors=1011

Answer 2

I personally solved it the following way:

X3DomAdapter.syncViews = function(firstView, secondView) {


    function sync(firstView, SecondView) {


        var firstViewarea = $('#' + firstView)[0].runtime.canvas.doc._viewarea;
        var secondViewarea = $('#' + SecondView)[0].runtime.canvas.doc._viewarea;

        if (sync.firstViewmatrix === undefined || sync.secondViewmatrix ===
            undefined) {
            sync.firstViewmatrix = firstViewarea.getViewMatrix();
            sync.secondViewmatrix = secondViewarea.getViewMatrix();
            sync.firstChanged = false;
            sync.secondChanged = false;
            return;
        }

        sync.firstChanged = !(firstViewarea.getViewMatrix().equals(sync.firstViewmatrix));
        sync.secondChanged = !(secondViewarea.getViewMatrix().equals(sync.secondViewmatrix));

        if (sync.firstChanged && InputProcessor.active_view === firstView) {
            secondViewarea.animateTo(firstViewarea.getViewMatrix(),
                secondViewarea._scene.getViewpoint(), 0);
            sync.firstViewmatrix = firstViewarea.getViewMatrix();
            sync.secondViewmatrix = secondViewarea.getViewMatrix();
        } else if (sync.secondChanged && InputProcessor.active_view ===
            secondView) {
            firstViewarea.animateTo(secondViewarea.getViewMatrix(),
                firstViewarea._scene.getViewpoint(), 0);
            sync.firstViewmatrix = firstViewarea.getViewMatrix();
            sync.secondViewmatrix = secondViewarea.getViewMatrix();
        }
    }

    return setInterval(function() {
        sync(firstView, secondView);
    }, 50);
};

Applied to your example you should be able to call

X3DomAdapter.syncViews("scene", "helper_scene");

You may want to replace the jQuery calls and pass in DOM nodes directly through the function plus make this a clean class that stores the states. In my use case I just wanted to sync two x3dom-views (splitscreen mode) and forget about it.