Fix WebXRHandController to work with Oculus and Sphere profiles

examples/jsm/webxr/WebXRHandController.js

@@ -1,7 +1,45 @@
+import {
+	Object3D
+} from "../../../build/three.module.js";
+
 import {
 	XRHandSpheresModel
 } from "./XRHandSpheresModel.js";
 
+import {
+	XRHandOculusMeshModel
+} from "./XRHandOculusMeshModel.js";
+
+function XRHandModel( controller ) {
+
+	Object3D.call( this );
+
+	this.controller = controller;
+	this.motionController = null;
+	this.envMap = null;
+
+	this.mesh = null;
+
+}
+
+XRHandModel.prototype = Object.assign( Object.create( Object3D.prototype ), {
+
+	constructor: XRHandModel,
+
+	updateMatrixWorld: function ( force ) {
+
+		Object3D.prototype.updateMatrixWorld.call( this, force );
+
+		if ( this.motionController ) {
+
+			this.motionController.updateMesh();
+
+		}
+
+	},
+} );
+
+
 var XRHandModelFactory = ( function () {
 
 	function XRHandModelFactory() {}
@@ -12,27 +50,38 @@ var XRHandModelFactory = ( function () {
 
 		createHandModel: function ( controller, profile ) {
 
-			const handModel = new XRHandSpheresModel( controller );
+			const handModel = new XRHandModel( controller );
 			let scene = null;
 
 			controller.addEventListener( 'connected', ( event ) => {
 
 				const xrInputSource = event.data;
-				console.log( "Connected!", xrInputSource );
 
-				if ( xrInputSource.hand ) {
+				if ( xrInputSource.hand && ! handModel.motionController ) {
 
+					handModel.visible = true;
 					handModel.xrInputSource = xrInputSource;
 
+					// @todo Detect profile if not provided
+					if ( profile === "spheres" ) {
+
+						handModel.motionController = new XRHandSpheresModel( controller, xrInputSource.handedness );
+
+					} else {
+
+						handModel.motionController = new XRHandOculusMeshModel( controller, xrInputSource.handedness );
+
+					}
+
 				}
 
 			} );
 
 			controller.addEventListener( 'disconnected', () => {
 
-				handModel.motionController = null;
-				handModel.remove( scene );
-				scene = null;
+				// handModel.motionController = null;
+				// handModel.remove( scene );
+				// scene = null;
 
 			} );
 

examples/jsm/webxr/XRHandOculusMeshModel.js

@@ -12,7 +12,6 @@ class XRHandOculusMeshModel {
 
 			this.controller.add( object );
 			object.scale.setScalar( 0.01 );
-			object.frustumCulled = false;
 
 			const bonesMapping = [
 				'b_%_wrist', // XRHand.WRIST,

examples/jsm/webxr/XRHandSpheresModel.js

@@ -1,8 +1,8 @@
 import {
-	Object3D,
 	SphereBufferGeometry,
 	MeshStandardMaterial,
-	Mesh
+	Mesh,
+	Group
 } from "../../../build/three.module.js";
 
 class XRHandSpheresModel {
@@ -13,6 +13,9 @@ class XRHandSpheresModel {
 
 	  this.envMap = null;
 
+		this.handMesh = new Group();
+		this.controller.add(this.handMesh);
+
 		if ( window.XRHand ) {
 
 			var geometry = new SphereBufferGeometry( 1, 10, 10 );
@@ -30,7 +33,7 @@ class XRHandSpheresModel {
 
 				var cube = new Mesh( geometry, tipIndexes.indexOf( i ) !== - 1 ? tipMaterial : jointMaterial );
 				cube.castShadow = true;
-				this.add( cube );
+				this.handMesh.add( cube );
 
 			}
 
@@ -41,12 +44,13 @@ class XRHandSpheresModel {
 	updateMesh() {
 
 		const defaultRadius = 0.008;
+		const objects = this.handMesh.children;
 
 		// XR Joints
 		const XRJoints = this.controller.joints;
-		for ( var i = 0; i < this.children.length; i ++ ) {
+		for ( var i = 0; i < objects.length; i ++ ) {
 
-			const jointMesh = this.children[ i ];
+			const jointMesh = objects[ i ];
 			const XRJoint = XRJoints[ i ];
 
 			if ( XRJoint.visible ) {