update

index.html

@@ -43,7 +43,8 @@ <h2 class="socketCode">Code...</h2>
     </div>
 
     <script src="/socket.io/socket.io.js"></script>
-
+    <script src="./utils/www-ahrs.js"></script>
+
     <script src="./libraries/three.js"></script>
     <script src="./libraries/cardboard-vr-display.js"></script>
 

package.json

@@ -8,5 +8,8 @@
     "start": "node server.js"
   },
   "author": "CrazyH",
-  "license": "Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International"
+  "license": "Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International",
+  "dependencies": {
+    "http": "0.0.1-security"
+  }
 }

server.js

@@ -1,6 +1,6 @@
 const express = require("express");
 const { Server } = require("socket.io");
-const { createServer } = require('node:http');
+const { createServer } = require('http');
 
 const app = express();
 const server = createServer(app);

src/peer.js

@@ -15,6 +15,21 @@ class PeerManager {
 
         this.socket = io();
 
+        var AHRS = require("ahrs");
+
+        this.ahrs = new AHRS({
+
+            sampleInterval: 68.84681583453657, // Madgwick is sensitive to this
+            algorithm:      'Madgwick',
+            beta:           0.8,
+
+        });
+
+        this.lastZeroQuaternion = null;
+
+        this.driftCompensation = [0, 0, 0];
+        this.lastTimestamp = 0;
+
         this.socket.on('connect', function() {
             scope.peerId = scope.socket.id;
 
@@ -63,6 +78,7 @@ class PeerManager {
     };
 
     update(scope, position, rotation, posNotFound) {
+        // Position
         if(posNotFound == false) {
             var posx = (position.x + (position.width / 2));
             var posy = (position.y + (position.height / 2));
@@ -75,6 +91,40 @@ class PeerManager {
         } else {
             this.root.render.scene.hand.position.set(0, -0.3, -0.2);
         };
+
+        // Rotation
+        var data = rotation;
+
+        let deltaTimeSeconds = 0;
+
+        if (scope.lastTimestamp) {
+            deltaTimeSeconds = (data.timestamp - scope.lastTimestamp);
+
+            scope.ahrs.update(
+                data.gyro[0],
+                data.gyro[1],
+                data.gyro[2],
+                data.accel[0],
+                data.accel[1],
+                data.accel[2],
+                data.magX, data.magY, data.magZ,
+                deltaTimeSeconds
+            );
+        };
+
+        scope.lastTimestamp = data.timestamp;
+
+        const {x, y, z, w} = scope.ahrs.getQuaternion();
+        scope.root.render.scene.hand.quaternion.set(x, z, -y, w);
+
+        if (data.homeButton) {
+            scope.lastZeroQuaternion = scope.root.render.scene.hand.quaternion.clone().inverse();
+            console.log(`Re-zeroed orientation! ${(new Date()).valueOf()}`);
+        }
+
+        if (scope.lastZeroQuaternion) {
+            scope.root.render.scene.hand.quaternion.premultiply(scope.lastZeroQuaternion);
+        }
     };
 
     launch(evt) {