WebXR 输入源：精通控制器与手部追踪，打造沉浸式体验

            xrSession.addEventListener('inputsourceschange', (event) => {
  // New input source connected
  event.added.forEach(inputSource => {
    console.log('New input source:', inputSource);
    // Handle the new input source
  });

  // Input source disconnected
  event.removed.forEach(inputSource => {
    console.log('Input source removed:', inputSource);
    // Handle the disconnected input source
  });
});

            

              
                Copy
              
            
          

            xrSession.requestAnimationFrame(function onAnimationFrame(time, frame) {
  const pose = frame.getViewerPose(xrReferenceSpace);

  if (pose) {
    const inputSources = xrSession.inputSources;

    for (const inputSource of inputSources) {
      if (inputSource.hand) continue; // Skip hand tracking

      const inputSourceState = frame.getControllerState(inputSource);

      if (inputSourceState) {
        // Access button states
        for (const button of inputSourceState.buttons) {
          if (button.pressed) {
            // Handle button press event
            console.log('Button pressed:', button);
          }
        }

        // Access axes values (e.g., joystick positions)
        for (const axis of inputSourceState.axes) {
          console.log('Axis value:', axis);
          // Use axis value to control movement or other actions
        }

         //Access squeeze state (if available)
         if (inputSourceState.squeeze != null) {
          if(inputSourceState.squeeze.pressed) {
             console.log("Squeeze pressed");
          }
         }
      }
    }
  }
});

            

              
                Copy
              
            
          

            const inputSources = xrSession.inputSources;
for (const inputSource of inputSources) {
    if (inputSource.hand) continue; // Skip hand tracking
    const gripPose = frame.getPose(inputSource.gripSpace, xrReferenceSpace);
    if (gripPose) {
        // Update the controller model's position and rotation
        controllerModel.position.set(gripPose.transform.position.x, gripPose.transform.position.y, gripPose.transform.position.z);
        controllerModel.quaternion.set(gripPose.transform.orientation.x, gripPose.transform.orientation.y, gripPose.transform.orientation.z, gripPose.transform.orientation.w);
    }
}

            

              
                Copy
              
            
          

            // Check if the trigger button is pressed
if (inputSourceState.buttons[0].pressed) {
  // Perform teleportation logic
  const targetPosition = calculateTeleportLocation();
  xrReferenceSpace = xrSession.requestReferenceSpace('local-floor', { position: targetPosition });
}

            

              
                Copy
              
            
          

            navigator.xr.requestSession('immersive-vr', {
  requiredFeatures: [],
  optionalFeatures: ['hand-tracking']
}).then(session => {
  xrSession = session;
  // ...
});

            

              
                Copy
              
            
          

            xrSession.requestAnimationFrame(function onAnimationFrame(time, frame) {
  const pose = frame.getViewerPose(xrReferenceSpace);

  if (pose) {
    const inputSources = xrSession.inputSources;

    for (const inputSource of inputSources) {
      if (!inputSource.hand) continue; // Skip controllers

      // Get the XRHand object
      const hand = inputSource.hand;

      // Iterate through the joints of the hand
      for (let i = 0; i < hand.length; i++) {
        const jointSpace = hand[i];

        // Get the pose of the joint
        const jointPose = frame.getPose(jointSpace, xrReferenceSpace);

        if (jointPose) {
          // Access the joint's position and orientation
          const jointPosition = jointPose.transform.position;
          const jointOrientation = jointPose.transform.orientation;

          // Update the position and rotation of a 3D model representing the joint
          jointModels[i].position.set(jointPosition.x, jointPosition.y, jointPosition.z);
          jointModels[i].quaternion.set(jointOrientation.x, jointOrientation.y, jointOrientation.z, jointOrientation.w);
        }
      }
    }
  }
});

            

              
                Copy
              
            
          

            // Check if a finger is close to an object
if (distanceBetweenFingerAndObject < threshold) {
  // Grab the object
  grabbedObject = object;
  grabbedObject.parent = handJointModel; // Attach the object to the hand
}

// When the finger moves away from the object
if (distanceBetweenFingerAndObject > threshold) {
  // Release the object
  grabbedObject.parent = null; // Detach the object from the hand
  // Apply velocity to the object based on the hand's movement
  grabbedObject.velocity.set(handVelocity.x, handVelocity.y, handVelocity.z);
}

            

              
                Copy