Update app.py

app.py

@@ -704,14 +704,17 @@ async(c, o, p, d, n, m, s)=>{
         window.video = document.getElementById("depth_video").getElementsByTagName("video")[0];
         window.parallax = 0;
         window.xdir = new BABYLON.Vector3(1, 0, 0);
+        window.zdir = new BABYLON.Vector3(0, 0, 1);
         window.rdir = new BABYLON.Vector3(0, 0, 0);
+        window.fdir = new BABYLON.Vector3(0, 0, 0);
 
         document.getElementById("model3D").getElementsByTagName("canvas")[0].addEventListener('pointermove', function(evt) {
         if (md === true) {
           rdir = BABYLON.Engine.LastCreatedScene.activeCamera.getDirection(xdir);
-          BABYLON.Engine.LastCreatedScene.activeCamera.target.x = parallax * rdir.x;
-          BABYLON.Engine.LastCreatedScene.activeCamera.target.y = parallax * rdir.y;
-          BABYLON.Engine.LastCreatedScene.activeCamera.target.z = parallax * rdir.z;
+          fdir = BABYLON.Engine.LastCreatedScene.activeCamera.getDirection(zdir);
+          BABYLON.Engine.LastCreatedScene.activeCamera.target.x = parallax * rdir.x + fdir.x;
+          BABYLON.Engine.LastCreatedScene.activeCamera.target.y = parallax * rdir.y + fdir.y;
+          BABYLON.Engine.LastCreatedScene.activeCamera.target.z = parallax * rdir.z + fdir.z;
           
           x = parseInt(evt.clientX - evt.target.getBoundingClientRect().x);
           y = parseInt(evt.clientY - evt.target.getBoundingClientRect().y);
@@ -1281,7 +1284,7 @@ with gr.Blocks(css=css, js=js, head=head) as demo:
               document.getElementById(\"model3D\").getElementsByTagName(\"canvas\")[0].oncontextmenu = function(e){e.preventDefault();}
               document.getElementById(\"model3D\").getElementsByTagName(\"canvas\")[0].ondrag = function(e){e.preventDefault();}
             '>Reset camera</a><br/>
-            <label for='zoom' style='width:8em'>Zoom</label><input id='zoom' type='range' style='width:128px;height:1em;' value='0.8' min='0.157' max='1.57' step='0.001' oninput='
+            <span><label for='zoom' style='width:8em'>Zoom</label><input id='zoom' type='range' style='width:128px;height:1em;' value='0.8' min='0.157' max='1.57' step='0.001' oninput='
               if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
                 var evt = document.createEvent(\"Event\");
                 evt.initEvent(\"click\", true, false);
@@ -1291,8 +1294,8 @@ with gr.Blocks(css=css, js=js, head=head) as demo:
               this.parentNode.childNodes[2].innerText = BABYLON.Engine.LastCreatedScene.activeCamera.fov;
 
               document.getElementById(\"model3D\").getElementsByTagName(\"canvas\")[0].style.filter = \"blur(\" + BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].material.pointSize/2.0*Math.sqrt(2.0) + \"px)\";
-            '/> <span>0.8</span><br/>
-            <label for='pan' style='width:8em'>Pan</label><input id='pan' type='range' style='width:128px;height:1em;' value='0' min='-16' max='16' step='0.001' oninput='
+            '/> <span>0.8</span></span><br/>
+            <span><label for='pan' style='width:8em'>Pan</label><input id='pan' type='range' style='width:128px;height:1em;' value='0' min='-16' max='16' step='0.001' oninput='
               if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
                 var evt = document.createEvent(\"Event\");
                 evt.initEvent(\"click\", true, false);
@@ -1300,12 +1303,13 @@ with gr.Blocks(css=css, js=js, head=head) as demo:
               }
               parallax.x = this.value;
               rdir = BABYLON.Engine.LastCreatedScene.activeCamera.getDirection(xdir);
-              BABYLON.Engine.LastCreatedScene.activeCamera.target.x = parallax * rdir.x;
-              BABYLON.Engine.LastCreatedScene.activeCamera.target.y = parallax * rdir.y;
-              BABYLON.Engine.LastCreatedScene.activeCamera.target.z = parallax * rdir.z;
+              fdir = BABYLON.Engine.LastCreatedScene.activeCamera.getDirection(zdir);
+              BABYLON.Engine.LastCreatedScene.activeCamera.target.x = parallax * rdir.x + fdir.x;
+              BABYLON.Engine.LastCreatedScene.activeCamera.target.y = parallax * rdir.y + fdir.y;
+              BABYLON.Engine.LastCreatedScene.activeCamera.target.z = parallax * rdir.z + fdir.z;
               this.parentNode.childNodes[2].innerText = parallax.x;
-            '/> <span>0.0</span><br/>
-            <label for='contrast' style='width:8em'>Contrast</label><input id='contrast' type='range' style='width:128px;height:1em;' value='1.0' min='0' max='2' step='0.001' oninput='
+            '/> <span>0.0</span></span><br/>
+            <span><label for='contrast' style='width:8em'>Contrast</label><input id='contrast' type='range' style='width:128px;height:1em;' value='1.0' min='0' max='2' step='0.001' oninput='
               if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
                 var evt = document.createEvent(\"Event\");
                 evt.initEvent(\"click\", true, false);
@@ -1313,8 +1317,8 @@ with gr.Blocks(css=css, js=js, head=head) as demo:
               } 
               BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.imageProcessing.contrast = this.value;
               this.parentNode.childNodes[2].innerText = BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.imageProcessing.contrast;
-            '/> <span>1.0</span><br/>
-            <label for='exposure' style='width:8em'>Exposure</label><input id='exposure' type='range' style='width:128px;height:1em;' value='1.0' min='0' max='2' step='0.001' oninput='
+            '/> <span>1.0</span></span><br/>
+            <span><label for='exposure' style='width:8em'>Exposure</label><input id='exposure' type='range' style='width:128px;height:1em;' value='1.0' min='0' max='2' step='0.001' oninput='
               if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
                 var evt = document.createEvent(\"Event\");
                 evt.initEvent(\"click\", true, false);
@@ -1322,7 +1326,7 @@ with gr.Blocks(css=css, js=js, head=head) as demo:
               } 
               BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.imageProcessing.exposure = this.value;
               this.parentNode.childNodes[2].innerText = BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.imageProcessing.exposure;
-            '/> <span>1.0</span><br/>
+            '/> <span>1.0</span></span><br/>
               <a href='#' onclick='snapshot();'>Screenshot</a>
               <a href='#' onclick='record_video();'>Record</a>
               <a href='#' onclick='stop_recording();'>Stop rec.</a>