KJSL: Removing cardboard

kevleyski · Jul 30, 2024 · 5f5dbeb · 5f5dbeb
1 parent fb8b703
commit 5f5dbeb
Show file tree

Hide file tree

Showing 11 changed files with 17 additions and 17 deletions.
diff --git a/examples/180-mono.html b/examples/180-mono.html
@@ -25,6 +25,7 @@
   </script>
 </head>
 <body>
+<div id="kevdebug"></div>
 <a href="javascript:switchMonoStereoscope()">switch to stereoscopic</a>
 <video width="640" height="640" id="videojs-vr-player" class="video-js vjs-default-skin" controls playsinline>
   <source src="../samples/video_180_lefteyeonly.mp4" type="video/mp4">

diff --git a/examples/180-tb.html b/examples/180-tb.html
@@ -7,6 +7,7 @@
   <link href="../dist/videojs-vr.css" rel="stylesheet">
 </head>
 <body>
+<div id="kevdebug"></div>
 <video width="640" height="640" id="videojs-vr-player" class="video-js vjs-default-skin" controls playsinline>
   <source src="../samples/video_180_TB.mp4" type="video/mp4">
 </video>

diff --git a/examples/180.html b/examples/180.html
@@ -25,7 +25,7 @@
   </script>
 </head>
 <body>
-<div id="kevdebug">KEVDEBUG</div>
+<div id="kevdebug"></div>
 <a href="javascript:switchMonoStereoscope()">switch to monoscopic</a>
 <video width="640" height="640" id="videojs-vr-player" class="video-js vjs-default-skin" controls playsinline>
   <source src="../samples/video_180.mp4" type="video/mp4">

diff --git a/examples/360-cube.html b/examples/360-cube.html
@@ -7,6 +7,7 @@
   <link href="../dist/videojs-vr.css" rel="stylesheet">
 </head>
 <body>
+<div id="kevdebug"></div>
 <video width="640" height="640" id="videojs-vr-player" class="video-js vjs-default-skin" controls playsinline>
   <source src="../samples/doisethup_cubemap.mp4" type="video/mp4">
 </video>

diff --git a/examples/360-sphere-detail.html b/examples/360-sphere-detail.html
@@ -7,6 +7,7 @@
   <link href="../dist/videojs-vr.css" rel="stylesheet">
 </head>
 <body>
+<div id="kevdebug"></div>
 <video width="640" height="640" id="videojs-vr-player" class="video-js vjs-default-skin" controls playsinline>
   <source src="../samples/eagle-360.mp4" type="video/mp4">
 </video>

diff --git a/examples/360-tb.html b/examples/360-tb.html
@@ -7,6 +7,7 @@
   <link href="../dist/videojs-vr.css" rel="stylesheet">
 </head>
 <body>
+<div id="kevdebug"></div>
 <p>TB Equirectangular video</p>
 <video width="640" height="640" id="videojs-vr-player-rect2" class="video-js vjs-default-skin" controls playsinline>
   <source src="../samples/coriolis_rect.webm" type="video/webm">

diff --git a/examples/360-two.html b/examples/360-two.html
@@ -7,6 +7,7 @@
   <link href="../dist/videojs-vr.css" rel="stylesheet">
 </head>
 <body>
+<div id="kevdebug"></div>
 <video width="640" height="640" id="videojs-vr-player" class="video-js vjs-default-skin" controls playsinline>
   <source src="../samples/lcs15_rect.webm" type="video/mp4">
 </video>

diff --git a/examples/360.html b/examples/360.html
@@ -7,6 +7,7 @@
   <link href="../dist/videojs-vr.css" rel="stylesheet">
 </head>
 <body>
+<div id="kevdebug"></div>
 <video width="640" height="640" id="videojs-vr-player" class="video-js vjs-default-skin" controls playsinline>
   <source src="../samples/eagle-360.mp4" type="video/mp4">
 </video>
@@ -23,7 +24,7 @@
 
     // AUTO is the default and looks at mediainfo
     var vr = window.vr = player.vr({projection: 'AUTO', debug: true, forceCardboard: false});
-    
+
     const videoSourceParam = window.location.search.substring(1);
     if (videoSourceParam) {
       if (videoSourceParam.indexOf(".mpd") !== -1) {

diff --git a/examples/eac-lr.html b/examples/eac-lr.html
@@ -7,6 +7,7 @@
   <link href="../dist/videojs-vr.css" rel="stylesheet">
 </head>
 <body>
+<div id="kevdebug"></div>
 <p>LR EAC video</p>
 <video width="640" height="640" id="videojs-vr-player-eac-lr" class="video-js vjs-default-skin" controls playsinline>
   <source src="../samples/coriolis_eac.webm" type="video/webm">

diff --git a/examples/eac.html b/examples/eac.html
@@ -7,6 +7,7 @@
   <link href="../dist/videojs-vr.css" rel="stylesheet">
 </head>
 <body>
+<div id="kevdebug"></div>
 <p>EAC video</p>
 <video width="640" height="640" id="videojs-vr-player-eac" class="video-js vjs-default-skin" controls playsinline>
   <source src="../samples/lcs15_eac.webm" type="video/webm">

diff --git a/vendor/three/DeviceOrientationControls.js b/vendor/three/DeviceOrientationControls.js
@@ -41,18 +41,12 @@ class DeviceOrientationControls extends EventDispatcher {
 
     this.alphaOffset = 0; // radians
 
-    const onDeviceOrientationChangeEvent = function (pitch, roll, yaw) {
-
+    const onDeviceOrientationChangeEvent = function (event) {
       const kevdebug = document.getElementById('kevdebug');
-      kevdebug.innerHTML = `KEVS pitch=${parseInt(pitch, 10)} roll=${parseInt(roll, 10)} yaw=${parseInt(yaw, 10)}`;
-
-      // Kevs quick hack
-      scope.deviceOrientation.alpha = pitch;
-      scope.deviceOrientation.beta = roll;
-      scope.deviceOrientation.gamma = yaw;
-
-//      scope.deviceOrientation = event;
-
+      if (kevdebug) {
+        kevdebug.innerHTML = `KEVS pitch=${parseInt(event.alpha, 10)} roll=${parseInt(event.beta, 10)} yaw=${parseInt(event.gamma, 10)}`;
+      }
+      scope.deviceOrientation = event;
     };
 
     const onScreenOrientationChangeEvent = function () {
@@ -88,10 +82,7 @@ class DeviceOrientationControls extends EventDispatcher {
           if ( response == 'granted' ) {
 
             window.addEventListener( 'orientationchange', onScreenOrientationChangeEvent );
-            window.addEventListener( 'deviceorientation', (event) => {
-              onDeviceOrientationChangeEvent(event.beta, event.gamma, event.alpha);
-            });
-
+            window.addEventListener( 'deviceorientation', onDeviceOrientationChangeEvent );
           }
 
         } ).catch( function ( error ) {