From 61fa6738eb0721b61449a0be76f82200ab1dd9f9 Mon Sep 17 00:00:00 2001 From: Jose Alonso Solis-Lemus Date: Thu, 13 Jun 2024 12:42:49 +0100 Subject: [PATCH] hand_tracker --- src/index.js | 105 ++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 100 insertions(+), 5 deletions(-) diff --git a/src/index.js b/src/index.js index ab22d2f..23d4f8c 100644 --- a/src/index.js +++ b/src/index.js @@ -46,7 +46,7 @@ if (navigator.xr === undefined) { // ---------------------------------------------------------------------------- const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({ - background: [0.5, 0.5, 0.5], + background: [0.0, 0.0, 0.0], }); const renderer = fullScreenRenderer.getRenderer(); const renderWindow = fullScreenRenderer.getRenderWindow(); @@ -160,6 +160,12 @@ function processData(meshNumber, addLight = true) { light2.setFocalPoint(0, 0, 0); light2.setIntensity(0.7); renderer.addLight(light2); + + const light3 = vtkLight.newInstance(); + light2.setPosition(0, -1, -1); + light2.setFocalPoint(0, 0, 0); + light2.setIntensity(0.9); + renderer.addLight(light3); } renderWindow.render(); @@ -192,15 +198,104 @@ resolutionChange.addEventListener('input', (e) => { renderWindow.render(); }); -vrbutton.addEventListener('click', (e) => { +let xrSession = null; + +function onSqueezeStart(event) { + console.log('Squeeze start'); + alert('Squeeze start'); +} + +function onSqueezeEnd(event) { + console.log('Squeeze end'); + alert('Squeeze end'); +} + +function onSelectStart(event) { + console.log('Select start'); + alert('Select start'); +} + +function onSelectEnd(event) { + console.log('Select end'); + alert('Select end'); +} + +// This function creates a line from the target ray +function createPointer(inputSource) { + // Get the target ray + const targetRay = inputSource.targetRaySpace; + + // Create a new line geometry + const geometry = new THREE.BufferGeometry().setFromPoints([ + new THREE.Vector3(0, 0, 0), // Start at the origin + new THREE.Vector3(0, 0, -1) // End one unit in the -Z direction + ]); + + // Create a new line material + const material = new THREE.LineBasicMaterial({ color: 0xff0000 }); + + // Create a new line + const line = new THREE.Line(geometry, material); + + // Set the line's matrix to the target ray's matrix + line.matrix.fromArray(targetRay.matrix); + + // Update the line's matrix world + line.updateMatrixWorld(true); + + return line; +} + +vrbutton.addEventListener('click', async (e) => { if (vrbutton.textContent === 'Send To VR') { - XRHelper.startXR(XrSessionTypes.HmdVR); + console.log('Requesting XR session...'); + // Request a new WebXR session + xrSession = await navigator.xr.requestSession('immersive-vr', { + optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking'] + }); + + console.log(xrSession.inputSources); // Add this line + for (let inputSource of xrSession.inputSources) { + console.log(inputSource); + if (inputSource.targetRayMode === 'tracked-pointer') { + // This is a controller + const pointer = createPointer(inputSource); + scene.add(pointer); + } + + if (inputSource.gamepad) { + // This is a gamepad input source + inputSource.addEventListener('squeezestart', onSqueezeStart); + inputSource.addEventListener('squeezeend', onSqueezeEnd); + inputSource.addEventListener('selectstart', onSelectStart); + inputSource.addEventListener('selectend', onSelectEnd); + } + } + + xrSession.addEventListener('inputsourceschange', event => { + for (let inputSource of event.removed) { + if (inputSource.gamepad) { + // This is a gamepad input source + inputSource.removeEventListener('squeezestart', onSqueezeStart); + inputSource.removeEventListener('squeezeend', onSqueezeEnd); + inputSource.removeEventListener('selectstart', onSelectStart); + inputSource.removeEventListener('selectend', onSelectEnd); + } + } + }); + + // Start the session + XRHelper.startXR(xrSession); + vrbutton.textContent = 'Return From VR'; - } else { + } else { + // End the session XRHelper.stopXR(); + xrSession = null; + vrbutton.textContent = 'Send To VR'; } - }); +}); // Listen for changes to the 'meshes' select element and load the selected mesh loadMeshSelector.addEventListener('change', function (event) {