Haptics example crashes after switching from hands to controllers (or vice verse)

[kalegd]

Description

While investigating a separate issue (#29861), I found that the haptics example crashes after switching between hands and controllers followed by trying to touch one of the music notes. Error log below

webxr_xr_haptics.html:250 Uncaught TypeError: Cannot read properties of undefined (reading 'frequency')
    at handleCollisions (webxr_xr_haptics.html:250:25)
    at animate (webxr_xr_haptics.html:299:5)
    at onAnimationFrame (three.module.js:27918:36)
    at XRSession.onAnimationFrame (three.module.js:13614:3)

Cause of error:
Only 2 oscillators are created and added to the oscillators list, but more than 2 controllers can be added to the controllers list and the same index is used to reference both lists

Proposed solution:
Extract createOscillator() out from initAudio() and use it to create a new oscillator whenever one is not found for the given controller. Increases complexity of code a tiny bit, but not in any way that makes it harder to understand

Alternative solution:
Add oscillators.push( createOscillator() ); 2 more times. Note that things will still break if there are ever more than 4 input sources

More than happy to open a pull request with the changes

Reproduction steps

1. Go to the haptics example with an XR device
2. Click the Enter XR button using hand tracking
3. Pick up your controllers
4. Try to touch one of the boxes

Code

// Proposed Solution
// Replaces https://github.com/mrdoob/three.js/blob/b276fb5669193b91a9fd5df2330ed6d76924ccfd/examples/webxr_xr_haptics.html#L47-L70
function initAudio() {
    
    if ( audioCtx !== null ) {
        
        return;
    
    }
    
    audioCtx = new ( window.AudioContext || window.webkitAudioContext )();

}

function createOscillator() {

    if(!audioCtx) initAudio();
    // creates oscillator
    const oscillator = audioCtx.createOscillator();
    oscillator.type = 'sine'; // possible values: sine, triangle, square
    oscillator.start();
    return oscillator;

}

// Replaces https://github.com/mrdoob/three.js/blob/b276fb5669193b91a9fd5df2330ed6d76924ccfd/examples/webxr_xr_haptics.html#L250
if(!oscillators[ g ]) oscillators[ g ] = createOscillator();
oscillators[ g ].frequency.value = 110 * Math.pow( 2, musicInterval / 12 );

// Alternate Solution
// Replaces https://github.com/mrdoob/three.js/blob/beab9e845f9e5ae11d648f55b24a0e910b56a85a/examples/webxr_xr_haptics.html#L66-L67
oscillators.push( createOscillator() );
oscillators.push( createOscillator() );
oscillators.push( createOscillator() );
oscillators.push( createOscillator() );

Live example

• Haptics Example

Screenshots

No response

Version

r170

Device

Headset

Browser

Chrome

OS

Android