merge

js/nomap_init.js

+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;
+
+        }
+    };
+    */
+}

js/nomap_vr_init.js

+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;
+
+        }
+    };
+    */
+}

test.html

@@ -43,7 +43,7 @@
   </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>

test_nomap.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/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>

test_nomap_vr.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>