Merge pull request #1 from krazysh01/add-lookingglass-support

Initial support for Looking Glass SDK

index.html

@@ -105,7 +105,8 @@
 					"fflate": "https://cdn.jsdelivr.net/npm/fflate@0.7.4/esm/browser.js",
 					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
 					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
-					"@pixiv/three-vrm": "https://cdn.jsdelivr.net/npm/@pixiv/three-vrm@3/lib/three-vrm.module.min.js"
+					"@pixiv/three-vrm": "https://cdn.jsdelivr.net/npm/@pixiv/three-vrm@3/lib/three-vrm.module.min.js",
+					"@lookingglass/webxr": "https://unpkg.com/@lookingglass/webxr@0.6.0/dist/bundle/webxr.js"
 				}
 			}
 		</script>

main.js

@@ -5,6 +5,8 @@ import { VRMLoaderPlugin, VRMUtils } from '@pixiv/three-vrm';
 import { loadMixamoAnimation } from './loadMixamoAnimation.js';
 import { SVGLoader } from 'three/addons/loaders/SVGLoader.js';
 import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';
+import { LookingGlassWebXRPolyfill, LookingGlassConfig } from "@lookingglass/webxr"
+import { VRButton } from "three/addons/webxr/VRButton.js";
 
 // Set up renderer to use full screen
 const renderer = new THREE.WebGLRenderer();
@@ -121,31 +123,33 @@ async function getSettingsIconToggle() {
 }
 
 // Modify the gears loading part
+var gearsScene = undefined;
 async function loadGearsIfEnabled() {
   const settingsIconToggle = await getSettingsIconToggle();
 
   if (settingsIconToggle) {
     const fbxLoader = new FBXLoader();
     fbxLoader.load('models/gears.fbx', (fbxScene) => {
-      fbxScene.scale.set(GEARS_SCALE, GEARS_SCALE, GEARS_SCALE);
+        gearsScene = fbxScene;
+        gearsScene.scale.set(GEARS_SCALE, GEARS_SCALE, GEARS_SCALE);
 
       // Position the gears above the dark green rectangle
-      fbxScene.position.set(
+        gearsScene.position.set(
         roundedRect.position.x + greenRectWidth / 2 - 0.63,
         roundedRect.position.y + greenRectHeight / 2 + GEARS_Y_OFFSET,
         roundedRect.position.z + GEARS_Z_OFFSET
       );
 
       // Apply color to all meshes in the gears model
-      fbxScene.traverse((child) => {
+        gearsScene.traverse((child) => {
         if (child.isMesh) {
           child.material = new THREE.MeshBasicMaterial({ color: GEARS_COLOR });
           // Add hover effect
           child.userData.originalColor = GEARS_COLOR; // Store original color
         }
       });
 
-      scene.add(fbxScene);
+      scene.add(gearsScene);
 
       // Add rotation animation to gears
       function animateGears() {
@@ -965,5 +969,33 @@ function updateTextMesh(message) {
   });
 }
 
+// Add WebXR for Looking Glass Functions
+renderer.xr.enabled = true
+
+// Configure looking glass settings
+const config = LookingGlassConfig
+config.targetY = 1
+config.targetZ = 0
+config.targetDiam = 1.5
+config.depthiness = 0.78
+config.fovy = (40 * Math.PI) / 180
+new LookingGlassWebXRPolyfill()
+
+// Add Start Session Button
+document.body.append(VRButton.createButton(renderer));
+
+function StartXRSession() {
+    // Remove settings gears for display
+    scene.remove(gearsScene);
+}
+
+function EndXRSession() {
+    // Reload page on XR Session end to fix view
+    console.log('XR Session Ended. Reloading page...');
+    location.reload();
+}
+
+renderer.xr.addEventListener('sessionstart', StartXRSession)
+renderer.xr.addEventListener("sessionend", EndXRSession)
 
 updateTextMesh('Waiting for call to start...');

package.json

@@ -4,13 +4,14 @@
   "main": "main.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "node server.js"
+    "start": "node server.mjs"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "description": "",
   "dependencies": {
+    "@lookingglass/webxr": "^0.6.0",
     "@vapi-ai/web": "^2.1.1",
     "adm-zip": "^0.5.16",
     "clipboardy": "^4.0.0",