I've got a problem in THREEJS with the XR controller when I try to raycast object which are further thant 40 in distance. Under 40, the raycast works fine.

I relied on this example in threeJS : https://threejs.org/examples/webxr_vr_dragging.html

Someone know of a way to increase the distance of test for raycasting in WebXR?

Below is the code I'm using to instanciate the controller.

setControllerVR(groupCamera, renderer) {
        let context = this;
        let controller1 = renderer.xr.getController(0);
        controller1.addEventListener('selectstart', this.onSelectStart.bind(this));
        controller1.addEventListener('selectend', this.onSelectEnd.bind(this));
        controller1.addEventListener('connected', function (event) {

            this.add(context.buildController(event.data));

        });
        controller1.addEventListener('disconnected', function () {

            this.remove(this.children[0]);

        });
        groupCamera.add(controller1);
        this.controller1 = controller1;
    }

    buildController( data ) {

        let geometry, material;

        switch ( data.targetRayMode ) {

            case 'tracked-pointer':

                geometry = new THREE.BufferGeometry();
                geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( [ 0, 0, 0, 0, 0, - 1 ], 3 ) );
                geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( [ 0.5, 0.5, 0.5, 0, 0, 0 ], 3 ) );

                material = new THREE.LineBasicMaterial( { vertexColors: true, blending: THREE.AdditiveBlending } );

                return new THREE.Line( geometry, material );

            case 'gaze':

                geometry = new THREE.RingGeometry( 0.02, 0.04, 32 ).translate( 0, 0, - 1 );
                material = new THREE.MeshBasicMaterial( { opacity: 0.5, transparent: true } );
                return new THREE.Mesh( geometry, material );

        }

    }