[WebXR] WebXRController doesn't initiate joints when controller connected

[DevPika]

I brought it up on the forum but then I realized it might be too specific to discuss on the forum so adding it as an issue here.

Describe the bug

WebXRController doesn't populate hand.joints when the controller i.e. hand is connected / starts getting tracked. This leads to hand.joints being {} when accessed inside controller "connected" event. hand.joints are populated only after the first WebXRController update call.

To Reproduce

Steps to reproduce the behavior:

1. Add an Event Listener callback for controller connected event.
2. hand.joints is {} inside the callback.

Code

const handGroup = renderer.xr.getHand( 0 );
handGroup.addEventListener( 'connected', ( event ) => {
    console.log(handGroup.joints); // returns {}, expected {"joint1":Group, "joint2":Group...}
} );

Live example

• glitch-latest-release-r145
  Also see comment notes inside the Glitch example above

Expected behavior

Current implementation of WebXRController returns {} for hand.joints when accessed after controller connected, expected {"joint1":Group, "joint2":Group...} . An alternative for getting the joints would be to add it some update method, but it requires polling instead of being event-driven, can be considered worse from a performance perspective (see render in the Glitch example)

Screenshots

Platform:

• Device: [Desktop, VR]
• Browser: [Chrome, Oculus Browser]
• Three.js version: [ r145]

[DevPika]

I am working on an MR for resolving this issue. The idea is to populate hand.joints while dispatching the connected event instead of waiting for the next update. Main changes in WebXRController.js include:

getHandJoint( hand, inputjoint ) {

    if ( hand.joints[ inputjoint.jointName ] === undefined ) {

        // The transform of this joint will be updated with the joint pose on each frame
        const joint = new Group();
        joint.matrixAutoUpdate = false;
        joint.visible = false;
        hand.joints[ inputjoint.jointName ] = joint;

        hand.add( joint );

    }

    return hand.joints[ inputjoint.jointName ];

}

connect( inputSource ) {

    if ( inputSource && inputSource.hand ) {

        const hand = this._hand;

        if ( hand ) {

            for ( const inputjoint of inputSource.hand.values() ) {

                this.getHandJoint( hand, inputjoint );

            }

        }

    }

    this.dispatchEvent( { type: 'connected', data: inputSource } );

    return this;

}

[DevPika]

I have added the build after the changes from the MR in the same Glitch example, you can try it out by commenting out the latest release and uncommenting the new build. The MR tries to fix this issue without adding any extra loops or calls in the controller update