merge

var SETTINGS = {

    'basepath': "models",

    'path'   : "1487451413_967079",

    'version': "v1"

}

function parseURL(){

    var parameters=location.href.replace(/\?/ig,"&").split("&");

    for (var i=0;i<parameters.length;i++) parameters[i]=parameters[i].split("=");

    for (var i=1;i<parameters.length;i++) {

        switch (parameters[i][0]) {

            case "path":         SETTINGS.path = parameters[i][1]; break;

            case "ver":          SETTINGS.version = parameters[i][1]; break;

        }

    }

}

$(function(){

    parseURL();

    init();

});

function init(){

    init_resize();

    var x3delement = $("#x3d_id").find("scene");

    var model_url = SETTINGS.basepath+"/"+SETTINGS.path+"/"+SETTINGS.version+"/"+SETTINGS.path+".x3d";

    console.log(model_url);

    var model = $(`

    <group>

        <inline name='mymodel' namespacename='mymodel' url='`+model_url+`'></inline>

    </group>`);

    x3delement.append(model);

    $.getScript("js/x3dom/x3dom-full.debug.js",function(){

        //wait until it DOM is extended

        x3dom.runtime.ready = function(){

            deep_init();

        };

    });

}

var resizeTimer = false;

var FOV = 30*Math.PI/180;

function init_resize(){

    resize();

    //bind resize

    $(window).resize(function(){

        clearTimeout(resizeTimer);

        resizeTimer = window.setTimeout(function(){

            resize();

        },100);

    });

}

function resize(){

    var element = document.getElementById('x3d_id');

    var w = $(window).width();

    var h = $(window).height();

    $(element).attr("width",w);

    $(element).attr("height",h);

    var fov = w/h*FOV;

    //fov = Math.PI/2;

    setFoV(fov);

}

function setFoV(val){

    var element = document.getElementById('x3d_id');

    var vp = $(element).find("Viewpoint")[0];

    $(vp).prop("fieldOfView",val);

}

var X3DOM_SCENE_INIT_DONE = false;

function deep_init(){

    /*    

    var element = document.getElementById('x3d_id');

    element.runtime.enterFrame = function(){

        // the only <strong> in the document

        var progress_element = $(element).find("strong");

        var progress_counter = $(progress_element).html();

        progress_counter = progress_counter.split(" ");

        cnt = parseInt(progress_counter[1]);

        if (!X3DOM_SCENE_INIT_DONE&&(cnt==0)){

            X3DOM_SCENE_INIT_DONE = true;

        }

    };

    */

}

var SETTINGS = {

    'basepath': "models",

    'path'   : "1487451413_967079",

    'version': "v1"

}

function parseURL(){

    var parameters=location.href.replace(/\?/ig,"&").split("&");

    for (var i=0;i<parameters.length;i++) parameters[i]=parameters[i].split("=");

    for (var i=1;i<parameters.length;i++) {

        switch (parameters[i][0]) {

            case "path":         SETTINGS.path = parameters[i][1]; break;

            case "ver":          SETTINGS.version = parameters[i][1]; break;

        }

    }

}

$(function(){

    parseURL();

    init();

});

function init(){

    init_resize();

    var x3delement = $("#x3d_id").find("scene");

    var model_url = SETTINGS.basepath+"/"+SETTINGS.path+"/"+SETTINGS.version+"/"+SETTINGS.path+".x3d";

    var model = $(`

    <group>

        <inline name='mymodel' namespacename='mymodel' url='`+model_url+`'></inline>

    </group>`);

    x3delement.append(model);

    $.getScript("js/x3dom/x3dom-full.debug.js",function(){

        //wait until it DOM is extended

        x3dom.runtime.ready = function(){

            deep_init();

        };

    });

}

var resizeTimer = false;

var FOV = 30*Math.PI/180;

function init_resize(){

    resize();

    //bind resize

    $(window).resize(function(){

        clearTimeout(resizeTimer);

        resizeTimer = window.setTimeout(function(){

            resize();

        },100);

    });

}

function resize(){

    var element = document.getElementById('x3d_id');

    var w = $(window).width();

    var h = $(window).height();

    $(element).attr("width",w);

    $(element).attr("height",h);

    var fov = w/h*FOV;

    //fov = Math.PI/2;

    setFoV(fov);

}

function setFoV(val){

    var element = document.getElementById('x3d_id');

    var vp = $(element).find("Viewpoint")[0];

    $(vp).prop("fieldOfView",val);

}

var X3DOM_SCENE_INIT_DONE = false;

function deep_init(){

    /*    

    var element = document.getElementById('x3d_id');

    element.runtime.enterFrame = function(){

        // the only <strong> in the document

        var progress_element = $(element).find("strong");

        var progress_counter = $(progress_element).html();

        progress_counter = progress_counter.split(" ");

        cnt = parseInt(progress_counter[1]);

        if (!X3DOM_SCENE_INIT_DONE&&(cnt==0)){

            X3DOM_SCENE_INIT_DONE = true;

        }

    };

    */

}

  </head>

  <body>

    <div id='x3d_wrapper'>

      <x3d id="x3d_id" width="100%" height="100%" showProgress="true" showStat="false" showLog="false">

      <x3d id="x3d_id" width='1600px' height='800px' showProgress="true" showStat="false" showLog="false" disableDoubleClick="true" keysEnabled="true">

        <scene>

          <navigationInfo id="navInfo" type='"examine"' speed='0.01'></navigationInfo>

          <Viewpoint fieldOfView='1' position='0 0 0' orientation='0 0 1 0'></Viewpoint>

<!DOCTYPE HTML>

<html lang="en">

  <head>

    <meta charset="utf-8"/>

    <title>Scene (NoMap)</title>

    <script type='text/javascript' src='js/jquery/jquery-3.1.1.js'></script>

    <script type='text/javascript' src='js/nomap_init.js'></script>

    <link rel='stylesheet' type='text/css' href='js/x3dom/x3dom.css'></link>

    <link rel='stylesheet' type='text/css' href='js/ui.css'></link>

  </head>

  <body>

    <div id='x3d_wrapper'>

      <x3d id="x3d_id" width='1600px' height='800px' showProgress="true" showStat="false" showLog="false" disableDoubleClick="true" keysEnabled="true"> 

        <scene>

          <navigationInfo id="navInfo" type='"examine" "walk"' speed='0.01'></navigationInfo>

          <Viewpoint fieldOfView='1' position='0 0 0' orientation='0 0 1 0'></Viewpoint>

<!--          <group>

            <inline name="back" namespacename="back" url="models/m1/v1/background.x3d"/>

          </group>-->

        </scene>

      </x3d>

    </div>

   </body>

</html>

<!DOCTYPE HTML>

<html lang="en">

  <head>

    <meta charset="utf-8"/>

    <title>Scene (NoMap)</title>

    <script type='text/javascript' src='js/jquery/jquery-3.1.1.js'></script>

    <script type='text/javascript' src='js/x3dom/x3dom-full.debug.js'></script>

<!--     <script type='text/javascript' src='js/nomap_vr_init.js'></script> -->

    <link rel='stylesheet' type='text/css' href='js/x3dom/x3dom.css'></link>

    <style type='text/css'>

        body {margin:0; padding:0; background-color:#04344c; background-color:#ddeeff; }

        .stereo-view {float:left; }

        .stereo-view x3d {float:left; }

    </style>

    <script>

        // Get display size

        var deviceOrientation = 'portrait';

        notFirstTime = false;

        //alert ('Checking device orientation and display size');

        while (deviceOrientation == 'portrait') {

            insideWidth = window.innerWidth;

            insideHeight = window.innerHeight;

            if (insideWidth > insideHeight) {deviceOrientation = 'landscape';}

            if (notFirstTime) {alert ("Please oriention device to landscape and press 'OK'");}

            notFirstTime = true;

        }

        x3dWidth = Math.floor((insideWidth-12)/2);

        x3dHeight = insideHeight;

        //x3dHeight = x3dHeight/2;

        x3dHeight = x3dHeight - 2;

    </script>

  </head>

  <body>

    <div class='stereo-view-1'>

        <!--view-source:http://realism.com/sample/model/stereo/VAM_246-1-1870/model-ig0b75.x3d?=&headlight=true&ipd=30&%20=-->

        <!--view-source:http://realism.com/x3d-examples/HTML5-Fall2014/stereo/kelpie.sgl.html -->

        <script>

            document.writeln ("<x3d id='all_view' showStat='false' showLog='false' disableDoubleClick='true' keysEnabled='true' x='0px' y='0px' width='"+(2*x3dWidth)+"px' height='"+x3dHeight+"px'>");

            var x3dDimStr = x3dWidth + ' ' + x3dHeight + ' 4';

        </script>

        <scene>

            <navigationInfo type='"EXAMINE" "WALK"'></navigationInfo>

            <background DEF='bgnd' 

                backUrl=  "js/images/background_side.jpeg" 

                bottomUrl="js/images/background_floor.jpeg" 

                frontUrl= "models/1488240695_710844/V0/1488240695_710844-texture-bgnd-ext.jpeg"

                leftUrl=  "js/images/background_side.jpeg" 

                rightUrl= "js/images/background_side.jpeg" 

                topUrl=   "js/images/background_sky.jpeg">

            </background>

            <transform translation='0 0 0' rotation='0 1 0 0'>

                <viewpoint DEF='viewpoint' id='x3d_viewpoint' position='0 0 0' orientation='0 1 0 0' zNear='0.001' zFar='2000'></viewpoint>

            </transform>

            <group id='unrendered_scene' render='false'>

                <group DEF='scene'>

                    <transform DEF='Viewpoint-Left'  id='x3d_viewpoint'       translation='0 0 0' rotation='0 1 0 0'>

                    <transform DEF='Viewpoint-gamma' id='x3d_viewpoint_gamma' translation='0 0 0'  rotation='0 1 0 0'>

                    <transform DEF='Viewpoint-beta'  id='x3d_viewpoint_beta'  translation='0 0 0'  rotation='1 0 0 0'>

                    <transform DEF='Viewpoint-alpha' id='x3d_viewpoint_alpha' translation='0 0 0'  rotation='0 0 1 0'>

                    <transform translation='0 0 0'>	<!-- account for model center != center-of-mass -->

                        <inline url='models/1488240695_710844/V0/1488240695_710844.x3d'></inline>

                    </transform>

                    </transform>

                    </transform>

                    </transform>

                    </transform>

                </group>

            </group>

            <group DEF='left' render='true'>

                <shape>

                    <appearance>

                        <!-- The dimensions is the size of each display side -->

                        <script>

                            document.writeln ("<renderedTexture interpupillaryDistance='0.3' id='rtLeft' stereoMode='LEFT_EYE' update='ALWAYS' dimensions='"+x3dDimStr+"' repeatS='false' repeatT='false'>");

                        </script>

                        <viewpoint USE='viewpoint' containerField='viewpoint'></viewpoint>

                        <background USE='bgnd' containerField='background'></background>

                        <group USE='scene' containerField="scene"></group>

                    </renderedTexture>

                    <composedShader>

                        <field name='tex' type='SFInt32' value='0'></field>

                        <field name='leftEye' type='SFFloat' value='1'></field>

                        <shaderPart type='VERTEX'>

                            attribute vec3 position;

                            attribute vec2 texcoord;

                            uniform mat4 modelViewProjectionMatrix;

                            varying vec2 fragTexCoord;

                            void main()

                            {

                                vec2 pos = sign(position.xy);

                                fragTexCoord = texcoord;

                                gl_Position = vec4((pos.x/2.0)-0.5, pos.y, 0.0, 1.0); 

                            }

                        </shaderPart>

                        <!-- The division of pos.x relates to the fraction of the window that is used -->

                        <shaderPart DEF="frag" type='FRAGMENT'>

                            #ifdef GL_ES

                            precision highp float;

                            #endif

                            uniform sampler2D tex;

                            uniform float leftEye;

                            varying vec2 fragTexCoord;

                            void main()

                            {

                                gl_FragColor = texture2D(tex, fragTexCoord);

                            }

                        </shaderPart>

                    </composedShader>

                    </appearance>

                    <plane solid="false"></plane>

                </shape>

            </group>		<!-- End of tag for left window -->

            <group DEF='right'>

                <shape>

                    <appearance>

                        <script>

                            document.writeln ("<renderedTexture interpupillaryDistance='0.3' id='rtRight' stereoMode='RIGHT_EYE' update='ALWAYS' dimensions='"+x3dDimStr+"' repeatS='false' repeatT='false'>");

                        </script>

                        <viewpoint USE='viewpoint' containerField='viewpoint'></viewpoint>

                        <background USE='bgnd' containerField='background'></background>

                        <group USE='scene' containerField="scene"></group>

                    </renderedTexture>

                    <composedShader>

                        <field name='tex' type='SFInt32' value='0'></field>

                        <field name='leftEye' type='SFFloat' value='0'></field>

                        <shaderPart type='VERTEX'>

                            attribute vec3 position;

                            attribute vec2 texcoord;

                            uniform mat4 modelViewProjectionMatrix;

                            varying vec2 fragTexCoord;

                            void main()

                            {

                                vec2 pos = sign(position.xy);

                                fragTexCoord = texcoord;

                                gl_Position = vec4((pos.x + 1.0)/2.0, pos.y, 0.0, 1.0);

                            }

                        </shaderPart>

                        <shaderPart USE="frag" type='FRAGMENT'>

                        </shaderPart>

                    </composedShader>

                    </appearance>

                    <plane solid="false"></plane>

                </shape>

            </group>

        </scene>

        </x3d>

    </div>

    <script language='JavaScript'>

        // --> Check to see if there are DeviceOrientation events in the DOM

        var previousAngles = {'alpha':0, 'beta':0, 'gamma':0};

        var vectors = {'alpha':"0 1 0 ", 'beta':"1 0 0 ", 'gamma':"0 0 1 "};

        var deg2rad = Math.PI / 180;

        if (window.DeviceOrientationEvent) {

            window.addEventListener('deviceorientation', function(eventData) {

                gamma = eventData.gamma;

		beta = eventData.beta;

		alpha = 360-eventData.alpha;

		rotate (alpha, 'alpha');

		rotate (beta,  'beta');

		rotate (gamma, 'gamma'); 

            }, false);

        }else{

            alert ('No Device Motion Sensor');

        }

        function rotate (angle, label) {

            intAngle = Math.floor(angle + 0.5);

            if (intAngle == previousAngles[label]) {return; }

            previousAngles[label] = intAngle;

            if (label == 'alpha') {

		rotateView ("x3d_viewpoint_"+label, vectors[label]+" "+intAngle*deg2rad);

//              rotateView ("x3d_viewpointR_"+label, vectors[label]+" "+intAngle*deg2rad);

//              rotateView ("x3d_viewpointL_"+label, vectors[label]+" "+intAngle*deg2rad);

            }

        }

        function rotateView (label, vector) {

            view = document.getElementById(label);

            view.setAttribute('set_rotation',vector);

        }

    </script>

  </body>

</html>