Learn how to get a VR controller with three.js

See more:

Javascript

HTML

Three.js displays something using gridHelper functions in VR space.
I want to move that grid with a VR controller, so I'm starting by getting a VR controller.
However, when I put in the code to get from the VR controller, the grid disappears. Why on earth？

What I have tried:

first

let controller1,controller2;

I put the following code in function init().

function onSelectStart() {
    this.userData.isSelecting = true;
    }
function onSelectEnd() {
    this.userData.isSelecting = false;
}
controller1 = renderer.xr.getController( 0 );
controller1.addEventListener( 'selectstart', onSelectStart );
controller1.addEventListener( 'selectend', onSelectEnd );
scene.add( controller1 );

controller2 = renderer.xr.getController( 1 );
controller2.addEventListener( 'selectstart', onSelectStart );
controller2.addEventListener( 'selectend', onSelectEnd );
scene.add( controller2 );

Finally, I put the following code in function animate().

handleController(controller1);
handleController(controller2);