Fixing Oculus hands rendering broken by recent WebXR Hands API change (#21712)

* Adding advanced hand examples

* Update samples with ECSY implementation

* Fix hands examples broken by the recent oculus WebXR Hands API change

* Replace fbx hand models with glb

* Generate screenshots for new examples

* Clean up in Text2D.js

* Clean up in Text2D.js

* Update XRHandModelFactory and OculusHandModel to fetch hand model from webxr input profile cdn

Author: Tianrui "Felix" Zhang

examples/files.json

@@ -342,6 +342,9 @@
 		"webxr_vr_handinput",
 		"webxr_vr_handinput_cubes",
 		"webxr_vr_handinput_profiles",
+		"webxr_vr_handinput_pointerclick",
+		"webxr_vr_handinput_pointerdrag",
+		"webxr_vr_handinput_pressbutton",
 		"webxr_vr_haptics",
 		"webxr_vr_lorenzattractor",
 		"webxr_vr_panorama",

examples/jsm/webxr/OculusHandModel.js

@@ -0,0 +1,82 @@
+import { Object3D, Sphere, Box3 } from "../../../build/three.module.js";
+import { fetchProfile } from '../libs/motion-controllers.module.js';
+import { XRHandMeshModel } from "./XRHandMeshModel.js";
+
+const DEFAULT_PROFILES_PATH = 'https://cdn.jsdelivr.net/npm/@webxr-input-profiles/[email protected]/dist/profiles';
+const DEFAULT_PROFILE = 'generic-hand';
+
+class OculusHandModel extends Object3D {
+  constructor(controller) {
+    super();
+
+    this.controller = controller;
+    this.motionController = null;
+    this.envMap = null;
+
+    this.mesh = null;
+
+    controller.addEventListener("connected", (event) => {
+      const xrInputSource = event.data;
+      if (xrInputSource.hand && !this.motionController) {
+        this.visible = true;
+        this.xrInputSource = xrInputSource;
+        fetchProfile(xrInputSource, DEFAULT_PROFILES_PATH, DEFAULT_PROFILE).then(({ profile, assetPath }) => {
+          this.motionController = new XRHandMeshModel(
+            this,
+            controller,
+            assetPath
+          );
+        }).catch((err) => {
+          console.warn(err);
+        });
+      }
+    });
+
+    controller.addEventListener("disconnected", () => {
+      this.clear();
+      this.motionController = null;
+    })
+  }
+
+  updateMatrixWorld(force) {
+    super.updateMatrixWorld(force);
+
+    if (this.motionController) {
+      this.motionController.updateMesh();
+    }
+  }
+
+  getPointerPosition() {
+    let indexFingerTip = this.controller.joints[POINTING_JOINT];
+    if (indexFingerTip) {
+      return indexFingerTip.position;
+    } else {
+      return null;
+    }
+  }
+
+  intersectBoxObject(boxObject) {
+    let pointerPosition = this.getPointerPosition();
+    if (pointerPosition) {
+      let indexSphere = new Sphere(pointerPosition, TOUCH_RADIUS);
+      let box = new Box3().setFromObject(boxObject);
+      return indexSphere.intersectsBox(box);
+    } else {
+      return false;
+    }
+  }
+
+  checkButton(button) {
+    if (this.intersectBoxObject(button)) {
+      button.onPress();
+    } else {
+      button.onClear();
+    }
+
+    if (button.isPressed()) {
+      button.whilePressed();
+    }
+  }
+}
+
+export { OculusHandModel };